Pro HTML5 and CSS3 Design Patterns

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. */