Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Offset Absolute and Offset Fixed

HTML

<h1>Offset Absolute and Offset Fixed</h1>

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

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

The default position of an offset absolute element is where it would have

been rendered if it were not absolutely positioned:

<span id="absolute" class="border">Absolute</span>

<p>You can use left and top margins to offset it from its

default position: <span id="fixed" class="border">Fixed</span></p>

</div>

</div>

CSS

#absolute { position:absolute; width:140px; height:auto; }

#fixed { position:fixed;

height:50px; margin-top:10px;

width:auto; margin-left:10px; }

/* Nonessential rules are not shown. */