z-index 属性在前端开发中控制元素的堆叠顺序。它决定了哪些元素会覆盖在其他元素之上。理解 z-index 的关键在于理解 堆叠上下文 (stacking context) 的概念。
1. 堆叠上下文:
- 不是所有元素都直接比较
z-index值。只有在同一个堆叠上下文内的元素才会根据z-index值决定堆叠顺序。 - 创建堆叠上下文的常见方式：
- 根元素 (
<html>) position值为absolute、relative或fixed的元素，并且z-index值不为autoposition值为sticky的元素（无论z-index值）opacity值小于 1 的元素transform、filter、perspective、clip-path、mask / mask-image / mask-composite值不为none的元素isolation: isolate的元素will-change指定的属性值为上面任意一个创建堆叠上下文的属性contain: layout、contain: paint或contain: strict的元素mix-blend-mode值不为normal的元素filter: blur()backdrop-filter值不为none的元素
- 根元素 (
2. z-index 值:
auto：默认值，不创建新的堆叠上下文。元素的堆叠顺序由其在 HTML 文档中的位置和父元素的堆叠顺序决定。- 整数（正数、负数或 0）：创建新的堆叠上下文。值越大，堆叠顺序越高，越靠近用户。
3. 堆叠顺序的确定:
浏览器根据以下规则确定元素的堆叠顺序：
- 背景和边框: 元素的背景和边框首先被绘制。
- 负 z-index: 堆叠上下文内，
z-index为负值的子元素。 - 块级框: 文档流中，没有定位的块级元素，以及
z-index为auto的定位元素。 - 浮动框: 浮动元素。
- 内联框: 内联元素，例如文本和图片。
- z-index:0: 堆叠上下文内，
z-index为 0 的子元素。 - 正 z-index: 堆叠上下文内，
z-index为正值的子元素，值越大，堆叠顺序越高。
4. 常见问题和解决方法:
- z-index 失效: 通常是因为元素没有在正确的堆叠上下文中。检查父元素是否创建了堆叠上下文，以及
z-index值是否设置正确。 - 堆叠上下文嵌套: 理解堆叠上下文的嵌套关系对于解决复杂的堆叠问题至关重要。子元素的
z-index值只在它的父级堆叠上下文中有效。 - 尽量避免使用过大的 z-index 值: 过大的
z-index值会增加维护的难度，并可能导致性能问题。
示例:
假设有三个 div 元素：A、B 和 C。A 是 B 的父元素，B 是 C 的父元素。
- 如果 A 的
z-index为 1，B 的z-index为 2，C 的z-index为 3，那么 B 会覆盖 A，C 会覆盖 B。 - 如果 A 的
z-index为 1，B 没有设置z-index，C 的z-index为 3，那么 A 会覆盖 C。因为 C 的z-index只在 B 的堆叠上下文中有效，而 B 没有创建新的堆叠上下文，所以 C 的z-index相对于 A 无效。
总结:
z-index 看似简单，但实际应用中需要深入理解堆叠上下文的概念。 通过仔细分析元素的层级关系和堆叠上下文，才能有效地控制元素的堆叠顺序。
希望以上解释能够帮助你理解 z-index。