实用指南：【CSS】层叠上下文和z-index

z-index 的作用范围受“层叠上下文（stacking context）”影响。

1. `z-index` 的基本作用

控制元素在 同一个层叠上下文（stacking context） 内的堆叠顺序。
值越大，显示层级越靠上。

2. 什么是层叠上下文（stacking context）

层叠上下文是浏览器渲染时的一个独立空间，z-index 只在同一层叠上下文里比较。
一个元素可能会创建新的层叠上下文，比如：

根层叠上下文：HTML 文档的 <html> 元素天然就是一个。
设置了定位 + z-index 的元素：
- position: relative/absolute/fixed/sticky 且 z-index 值不是 auto。
其他能触发层叠上下文的属性（即使没设置 z-index）：
- opacity < 1
- transform
- filter
- perspective
- clip-path
- will-change
- isolation: isolate

3. 作用范围

同一层叠上下文内：
- z-index 决定了元素堆叠顺序。
跨层叠上下文时：
- 不同上下文之间的元素，比较的是上下文容器的层级，而不是容器内部子元素的 z-index。
- 即：一个子元素 z-index: 9999，也不能盖过外层上下文里 z-index: 10 的兄弟元素。

4. 举个例子

<div class="a">
    <div class="b">
  <div class="c">c</div>
  </div>
<div class="d">d</div>
</div>

.a {
position: relative;
z-index: 1;
/* 父容器 A 层级低 */
}
.b {
position: relative;
z-index: 9999;
/* B 再高也只是 a 内部 */
}
.c {
position: relative;
z-index: 99999;
/* 在 b 内部最高 */
}
.d {
position: relative;
z-index: 2;
/* D > A(1)，所以 D 在最上面 */
}

结果：

.d 会压在 .c 上面，尽管 .c 的 z-index 数字更大。
因为 .c 属于 .a 这个上下文，而 .a 的 z-index = 1，整体比 .d（z-index=2）低。

5. 总结

z-index只在同一层叠上下文内生效。
新的层叠上下文会“隔离”子元素，子元素的 z-index 不能跨越父容器。
想让元素真正覆盖其他内容，要确保它所在的上下文本身层级更高。

posted on 2025-09-17 20:03 ycfenxi 阅读(7) 评论(0) 收藏举报

刷新页面返回顶部