Pro HTML5 and CSS3 Design Patterns

CHAPTER 7 ■ POSITIONING MODELS

Atomic

HTML

<h1>Atomic</h1>

<div>Layered

<p class="static">Static Overlapping Block</p>

<p class="static overlap">Static Overlapping Block</p>

<table class="static overlap"><tr><td>Overlapping Table</td></tr></table></div>

<div>Atomic

<p class="relative">Relative Overlapping Block</p>

<p class="fixed">Fixed Overlapping Block</p>

<p class="absolute">Absolute Overlapping Block</p></div>

CSS

*.static { position:static; }

*.overlap { margin-top:-22px; }

*.relative { position:relative; }

*.fixed { position:fixed; margin-top:-16px; }

*.absolute { position:absolute; top:65px; }

/* Nonessential rules are not shown. */