CHAPTER 7 ■ POSITIONING MODELS
Relative
HTML
<h1>Relative</h1>
<div class="relative">Before Relative Positioning
<p class="static">Static Block
<span class="static ontop">Static Inline on top</span></p>
<p class="static ontop">Static Block on top</p>
<p class="absolute">Absolute</p></div>
<div class="relative">After Relative Positioning
<p class="relative">Relative Block
<span class="relative ontop offset">Relative Inline on top</span></p>
<p class="relative ontop">Relative Block on top</p>
<p class="absolute">Absolute</p></div>
CSS
*.ontop { z-index:1; }
*.static { position:static; }
*.relative { position:relative; }
*.absolute { position:absolute; z-index:auto; }
*.offset { left:20px; top:auto; }
/* Nonessential rules are not shown. */