Positioning and Layers

Z Index Stack

Two overlapping panels use absolute positioning, then z-index raises one panel above the other in the stacking order.

Program

When positioned elements overlap, stacking order decides which one appears on top. z-index is useful when source order alone is not enough.

z-index is visible only when positioned elements overlap.Stacking orderPinned overlap result from z_index_stack.htmlsame page plane; stack level decides front-to-backsource layernormal flowpanel z=1behindpanel z=2frontz-index is visible only when positioned elements overlap.
Figure: z-index raises one positioned panel. Model source: books/css/06positioning_layers/z_index_stack/diagrams/z_index_stack.semantic.json.
z_index_stack.html 
<style>
.stack { position: relative; height: 170px; }
.layer { position: absolute; width: 190px; height: 92px; }
.base { left: 48px; top: 38px; background: #dbeafe; }
.raised { left: 126px; top: 76px; z-index: 2; background: #fde68a; }
</style>

<section class="stack">
  <article class="layer base">Base panel</article>
  <article class="layer raised">Alert panel</article>
</section>
stacking order Stacking order decides which overlapping element paints in front.
z-index z-index sets the stack level of a positioned element.