Understanding CSS Stacking Context and Z‑Index Behavior

In web development, element positioning involves X, Y, and Z axes, where the Z‑axis determines stacking order; while most developers understand X and Y, the Z‑axis logic is often unclear.

The article introduces stacking context, stacking level, and stacking order to clarify how elements are layered.

1. Phenomenon

Using // 穿透父级容器的 z-index and // 不能穿透父级容器的 z-index examples, it shows that when a parent container has z-index: auto, a child with a negative z-index can appear behind the parent, whereas setting the parent’s z-index to 0 prevents the child from crossing the parent.

// 穿透父级容器的 z-index
<!-- 100 * 100 的深蓝色 Block -->
<div class="block blue" style="position: relative; z-index: auto;">
    <!-- 50 * 50 的红色 Block -->
    <div class="small red" style="position: relative; z-index: -1;"></div>
</div>

// 不能穿透父级容器的 z-index
<!-- 100 * 100 的深蓝色 Block -->
<div class="block blue" style="position: relative; z-index: 0;">
    <!-- 50 * 50 的红色 Block -->
    <div class="small red" style="position: relative; z-index: -1;"></div>
</div>

2. Characteristics

Stacking contexts can be nested; child elements are constrained by their parent context. Each context is independent, simplifying rendering calculations and improving performance when updating the DOM.

When z-index is unspecified, its stacking level is equivalent to z-index: 0 , which is higher than ordinary elements.

3. Creation Methods

There are three primary ways to create a stacking context:

The root element of the page (root stacking context).

Positioned elements with a numeric z-index value.

Other CSS3 properties such as opacity (not 1), transform (not none), filter (not none), and flex items with z-index not auto.

Note: z-index: auto and z-index: 0 belong to the same stacking level, but z-index: 0 triggers the creation of a stacking context.

4. Stacking Rules

When elements are in the same stacking context, they are ordered by their numeric z-index values; if values are equal, the later element in the DOM tree appears on top.

If stacking levels and orders are identical, the element that appears later in the DOM overrides the earlier one.

5. Recruitment Notice

The article concludes with a hiring call for front‑end engineers to join the ZooTeam, providing contact email [email protected].

6. References

Deep dive into CSS stacking context and order – https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

MDN documentation on stacking context – https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

Comprehensive guide to CSS stacking context – https://juejin.im/post/5b876f86518825431079ddd6