Pro HTML5 and CSS3 Design Patterns

CHAPTER 7 ■ POSITIONING MODELS

Fixed

HTML

<h1>Fixed</h1>

<div class="gp"><h2>Positioned Grandparent</h2>

<div class="parent"><h2>Non-positioned Parent</h2>

Absolute elements are positioned in their own layer in front of or behind the

normal flow.

<span id="in-place" class="box">In-place Absolute</span>

<span id="sized" class="box">Sized Absolute</span>

<p id="stretched" class="box">Stretched Absolute</p>

<p id="shrinkwrapped" class="box">Shrinkwrapped Absolute</p></div></div>

CSS

*.gp { position:relative; z-index:1; }

#in-place { position:fixed; z-index:1; }

#shrinkwrapped { position:fixed; z-index:0;

width:auto; left:0; bottom:0; margin:0; }

#sized { position:fixed; z-index:auto;

width:170px; height:115px; bottom:0; left:270px; margin:0; }

#stretched { position:fixed; z-index:-1;

height:auto; right:0; top:0; bottom:0; margin:0; }

/* Nonessential rules are not shown. */