Pro HTML5 and CSS3 Design Patterns

CHAPTER 7 ■ POSITIONING MODELS

Relative Float

HTML

<h1>Relative Float</h1>

<div class="parent">

<div class="relative1 float">Relative Float 1</div>

<div class="relative2 float">Relative Float 2</div>

<p>This text is next to a relative float. A relative float works just like a

static float except that it is relatively positioned. This allows it to be

offset using <code>left</code> and <code>right</code> without affecting

the position of other elements. It also allows <code>z-index</code> to

control the stacking order of floats.

<span class="absolute">absolute</span></p></div>

CSS

*.parent { position:relative; padding:20px; }

*.relative1 { position:relative; z-index:3; top:10px; left:10px; }

*.relative2 { position:relative; z-index:2; top:20px; left:-30px; }

*.float { float:left; width:100px; height:50px;

margin-right:25px; margin-bottom:40px; }

*.absolute { position:absolute; z-index:1; top:102px; left:215px; }

/* Nonessential rules are not shown. */