The default rules of stacking order

The stacking order is a crucial concept in CSS that determines the display priority of elements when they overlap. Understanding the default rules can prevent unexpected coverage issues in layouts, especially in complex structures.

Baseline of Default Stacking Order

When elements do not have z-index set and do not form a stacking context, the browser renders them in DOM flow order. Later elements will overlap earlier ones:

<div class="box box1">First box</div>
<div class="box box2">Second box</div>

.box {
  position: absolute;
  width: 200px;
  height: 200px;
}
.box1 {
  background: red;
  top: 50px;
  left: 50px;
}
.box2 {
  background: blue;
  top: 100px;
  left: 100px;
}

Here, the blue box will overlap the red box because it appears later in the DOM.

Conditions for Creating a Stacking Context

The following properties create a new stacking context:

• position: relative/absolute/fixed + z-index not auto
• position: fixed (no z-index required)
• opacity less than 1
• transform not none
• filter not none
• will-change specifying certain properties

.parent {
  position: relative;
  z-index: 1; /* Creates a stacking context */
}
.child {
  position: absolute;
  z-index: 999; /* Only effective within the parent context */
}

Standard Stacking Order Rules

From bottom to top, the default order is:

1. Background and borders of elements forming a stacking context
2. Child stacking contexts with negative z-index
3. Block-level elements in normal flow
4. Floating elements
5. Inline elements in normal flow
6. Positioned elements with z-index: auto or 0
7. Child stacking contexts with positive z-index

<div class="stacking-context">
  <div class="negative-z">Negative z-index</div>
  <div class="block">Block-level element</div>
  <span class="inline">Inline element</span>
  <div class="float">Floating element</div>
  <div class="positioned">Positioned element</div>
</div>

.stacking-context {
  position: relative;
  z-index: 0;
}
.negative-z {
  position: absolute;
  z-index: -1;
}
.float {
  float: left;
}
.positioned {
  position: absolute;
  top: 0;
}

Pitfalls of z-index

z-index only works within sibling stacking contexts. z-index values in different stacking contexts do not affect each other:

<div class="ctx1">
  <div class="high-z">z-index:100</div>
</div>
<div class="ctx2">
  <div class="low-z">z-index:1</div>
</div>

.ctx1 { position: relative; z-index: 1; }
.ctx2 { position: relative; z-index: 2; }
.high-z { z-index: 100; }
.low-z { z-index: 1; }

Here, the low-z element will overlap the high-z element because its parent stacking context has a higher z-index.

Impact of Special Properties

Certain CSS properties alter the default stacking behavior:

• mix-blend-mode creates a new stacking layer
• isolation: isolate forces an independent stacking context
• contain: paint also creates a stacking context

.blend-mode {
  position: relative;
  mix-blend-mode: multiply; /* Creates a new stacking layer */
}
.isolated {
  isolation: isolate; /* Isolates the stacking context */
}

Practical Application Example

Implementing a modal requires understanding stacking order:

<div class="content">Page content</div>
<div class="overlay"></div>
<div class="modal">Modal</div>

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
}

Browser Rendering Process

The browser follows these steps when rendering elements:

1. Parses the DOM tree and builds the render tree
2. Processes the render tree in layers
3. Composites layers according to stacking order
4. Finally paints to the screen

// Stacking order can be checked via browser APIs
console.log(getComputedStyle(element).zIndex);

Debugging Stacking Issues

In Chrome Developer Tools:

1. Use the Layers panel to view layering
2. Check z-index values in the Elements panel
3. Use document.defaultView.getComputedStyle(element) to get computed styles

// Check if an element creates a stacking context
function isStackingContext(element) {
  const style = getComputedStyle(element);
  return style.position === 'fixed' ||
    (style.zIndex !== 'auto' && 
     ['relative', 'absolute', 'fixed'].includes(style.position)) ||
    parseFloat(style.opacity) < 1 ||
    style.transform !== 'none' ||
    style.filter !== 'none';
}

Performance Optimization Considerations

Excessive use of z-index can:

1. Increase the number of browser composite layers
2. Trigger unnecessary repaints
3. Increase memory consumption

Recommendations:

• Minimize stacking context levels
• Avoid extremely high z-index values (e.g., 9999)
• Use will-change to optimize expected changes

.optimized {
  will-change: transform; /* Hints the browser to optimize in advance */
}