Pro HTML5 and CSS3 Design Patterns

CHAPTER 7 ■ POSITIONING MODELS

Stacking Context

HTML

<h1>Stacking Context</h1>

<div class="stacking-context1 box">

<div class="caption">1. Background and Borders of Stacking Context #1

<br /><code>z-index:2</code></div>

<span class="level2 box">2. Absolute <code>z-index:-999</code></span>

<div class="level3 box">3. Static Block<br />

<span class="level4 box">4. Static Float</span>

<span class="level5 box">5. Static Span</span><br /><br /><p class="clear"></p>

<span class="level6 box">6. Relative Span <code>z-index:0</code></span>

<span class="level7 box">7. Absolute <code>z-index:999</code></span>

</div>

</div>

<div class="stacking-context2 box"><!-- ...Same exact code as previous... --></div>

CSS

*.stacking-context1 { z-index:2; position:absolute; left:10px; top:70px; }

*.stacking-context2 { z-index:1; position:absolute; left:223px; top:120px; }

*.level2 { z-index:-999; position:absolute; }

*.level3 { position:static; }

*.level4 { float:left; }

*.level5 { position:static; }

*.level6 { z-index:0; position:relative; }

*.level7 { z-index:999; position:absolute; }

/* Nonessential rules are not shown. */