Pro HTML5 and CSS3 Design Patterns

CHAPTER 7 ■ POSITIONING MODELS

Positioned

HTML

<h1>Positioned</h1>

<div class="relative" id="canvas">

<p class="static">Static Positioned</p>

<p class="static">This text contains a relatively positioned span that is

<span class="relative offset">offset</span> from its normal position.</p>

<em class="absolute">Absolutely Positioned</em>

<img class="fixed1" src="star.gif" alt="star" />

<p class="fixed2">Fixed Positioned</p>

</div>

CSS

div,p,em { margin:10px; padding:10px; background-color:white;

border-left:1px solid gray; border-right:2px solid black;

border-top:1px solid gray; border-bottom:2px solid black; }

*.static { position:static; }

*.relative { position:relative; left:auto; top:auto; bottom:auto; right:auto; }

*.absolute { position:absolute; left:35%; top:-40px; }

*.fixed1 { position:fixed; z-index:20; right:5px; bottom:35px; }

*.fixed2 { position:fixed; z-index:10; right:0px; bottom:0;

width:100px; margin:0;}

*.offset { bottom:-15px; left:-20px; }

#canvas { background-color:gold; }

/* Nonessential rules are not shown. */