How the z-index works
z-index is a CSS property that controls the stacking order of elements, determining their display priority in the direction perpendicular to the screen. It only takes effect on positioned elements (where the position value is not static), with higher values bringing elements closer to the user's view. Understanding its rules requires considering factors like stacking contexts, stacking levels, and DOM flow.
Basic Concepts of Stacking Context
A stacking context is a three-dimensional concept in HTML, representing a collection of stacking levels for a group of elements with a common parent. Ways to create a stacking context include:
- The root element (
<html>) positionset toabsolute/relativewith az-indexother thanautopositionset tofixed/stickyopacityless than 1transformnot set tonone- Flex container children with
z-indexnot set toauto
<div style="position: relative; z-index: 1;">
<!-- Creates a new stacking context -->
<div style="position: absolute; z-index: 100;"></div>
</div>
<div style="position: relative; z-index: 2;"></div>
Rules for Comparing z-index Values
When elements are in the same stacking context, z-index values are compared directly:
- Higher values cover lower ones
- For equal values, the later element in the DOM flow covers the earlier one
- Positioned elements without
z-indexdefault toautoand are sorted by stacking level
.box1 { position: absolute; z-index: 3; } /* Topmost layer */
.box2 { position: absolute; z-index: 2; }
.box3 { position: absolute; } /* Equivalent to z-index: auto */
Nesting Characteristics of Stacking Contexts
A child element's z-index only takes effect within its parent stacking context and cannot cross parent boundaries to affect other contexts:
<div style="position: relative; z-index: 1;">
<div style="position: absolute; z-index: 9999;"></div>
</div>
<div style="position: relative; z-index: 2;">
<!-- This div will cover the entire z-index:1 context above -->
</div>
Common Issues and Solutions
Debugging z-index Failures
- Check if the element is positioned
- Confirm whether the parent creates a stacking context
- Investigate unintended effects from properties like
transformoropacity
Modal Implementation Example
<div class="modal-backdrop" style="
position: fixed;
z-index: 1000;
background: rgba(0,0,0,0.5);
"></div>
<div class="modal" style="
position: fixed;
z-index: 1001;
width: 300px;
background: white;
">
Modal Content
</div>
Browser Rendering Details
Modern browsers render elements in the following order (from bottom to top):
- Background/borders of the root stacking context
- Child stacking contexts with negative
z-indexvalues - Non-positioned block-level elements in normal flow
- Non-positioned floating elements
- Inline elements in normal flow
- Positioned elements with
z-index: autoor 0 - Positioned elements with positive
z-indexvalues
/* Typical rendering hierarchy example */
.negative { position: absolute; z-index: -1; }
.normal-flow { display: block; }
.float { float: left; }
.positioned { position: absolute; z-index: 0; }
.top-layer { position: fixed; z-index: 1; }
Practical Development Tips
- Use CSS variables to manage layers:
:root {
--z-modal: 1000;
--z-tooltip: 2000;
}
.modal { z-index: var(--z-modal); }
- Scope
z-indexin component-based development:
/* Vue scoped style example */
.modal-wrapper[data-v-123] {
position: fixed;
z-index: 1000;
}
- Debugging tools:
- Chrome DevTools'
Layerspanel - Check computed values with
getComputedStyle:
window.getComputedStyle(element).zIndex
Performance Optimization Considerations
Improper use of z-index may cause:
- Layer explosion: Excessive independent layers increase memory usage
- Reduced repaint efficiency: Changes to high-level elements trigger large-scale repaints
- GPU-accelerated layer management: Interaction between
will-changeandz-index
/* Use will-change cautiously */
.animated-element {
will-change: transform;
z-index: 10; /* May trigger GPU acceleration */
}
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
