CHAPTER 7 ■ POSITIONING MODELS
Closest Positioned Ancestor
HTML
<body>
<h1>Closest Positioned Ancestor</h1><div class="static ggp">Non-positioned Great-grandparent
<div class="absolute sized bottom-right box1">Absolute #1 Bottom Right
<em class="absolute offset box2">Nested Absolute</em></div>
<div class="relative gp">Positioned Grandparent
<div class="static parent">Non-positioned Parent
<span class="absolute sized bottom-right box1">Absolute #2 Bottom Right
<em class="absolute offset box2">Nested Absolute</em></span>
</div></div></div>
</body>CSS
*.static { position:static; }
*.relative { position:relative; }
*.absolute { position:absolute; }*.sized { width:230px; height:70px; }
*.bottom-right { bottom:0; right:0; }
*.offset { left:45px; top:30px; }/* Nonessential rules are not shown. */