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
Visuals: captured from real browser rendering
<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>

  1. Create a local positioning area.

    The section becomes a canvas for overlapping panels.
    The relative parent gives absolute children a local coordinate space.

  2. Make both panels positioned layers.

    The panels can overlap inside the section.
    Shared layer rules keep the boxes comparable.

  3. Place the base layer.

    The base panel sits behind the later panel.
    Left and top offsets place a positioned box.

  4. Raise the alert layer above the base.

    The yellow alert panel sits on top.
    z-index changes paint order among positioned elements.
stacking order Stacking order decides which overlapping element paints in front.
z-index z-index sets the stack level of a positioned element.