在网页布局中，元素的层叠顺序（Stacking Order） 是决定多个元素在垂直方向上重叠时显示优先级的关键机制。掌握层叠顺序对于实现复杂的页面交互、弹窗、遮罩层等效果至关重要。
本文将系统讲解：
- 什么是层叠顺序？
- 层叠上下文（Stacking Context）的概念；
- 元素在层叠中的默认层级关系；
z-index的真正作用；- 如何控制元素的层叠顺序；
- 常见问题与解决方案。
一、什么是层叠顺序？
✅ 定义：
层叠顺序（Stacking Order） 是浏览器用来决定多个元素在 Z 轴（垂直屏幕方向）上显示顺序的规则体系。
当多个元素的位置发生重叠时，它们会根据各自的"层级"来决定谁在上面、谁在下面。
二、层叠顺序的七层结构（从上到下）
以下是标准盒模型在层叠上下文中的默认层级排列顺序（由高到低）：
| 层级 | 内容描述 |
|---|---|
| 1. 正 z-index 层 | z-index > 0 的定位元素（如 position: relative/absolute/fixed/sticky） |
| 2. z-index: 0 层 | z-index: 0 或 z-index: auto 的定位元素 |
| 3. 行内元素层 | 文档流中的行内元素（如 span、a、strong 等非定位元素） |
| 4. 浮动元素层 | 非定位浮动元素（float:left/right） |
| 5. 块级元素层 | 文档流中的块级非定位元素（如 div、p） |
| 6. 负 z-index 层 | z-index < 0 的定位元素 |
| 7. 背景和边框层 | 当前层叠上下文的背景色、背景图、border |
📌 注意：
- 只有定位元素 （
position不是static）才能设置z-index； z-index只在同一个层叠上下文中生效；
三、什么是层叠上下文（Stacking Context）？
✅ 定义：
层叠上下文（Stacking Context） 是一个三维概念，它决定了其子元素在 Z 轴上的显示层级。
每个 HTML 元素都处于某个层叠上下文中，而这个上下文可以嵌套。
🧠 层叠上下文的特点：
- 每个层叠上下文都有一个独立的 Z 轴层级；
- 子层叠上下文的层级不能超过父上下文；
- 层叠上下文之间互不影响；
- 默认根层叠上下文是
<html>元素；
四、创建新的层叠上下文的条件
以下任意一种情况都会触发一个新的层叠上下文：
| 触发方式 | 示例代码 |
|---|---|
设置 z-index（值不为 auto）且配合 position 不为 static |
position: relative; z-index: 1; |
使用 transform、filter、opacity 等属性 |
transform: scale(1); |
使用 isolation: isolate |
多用于 SVG 和 Canvas 场景 |
使用 mix-blend-mode |
图层混合模式 |
使用 will-change |
will-change: transform; |
使用 position: fixed / sticky |
自动创建新层叠上下文 |
使用 opacity 小于 1 |
opacity: 0.9; |
📌 重点提醒：
z-index必须配合position: relative/absolute/fixed/sticky才能生效！
五、z-index 的真正含义
很多人误以为 z-index 数值越大就一定越靠前，其实不然。
✅ 实际规则如下：
- 相同层叠上下文：数值大的靠前；
- 不同层叠上下文 ：比较的是整个上下文的层级，而不是内部元素的
z-index；
示例：
css
.parent {
position: relative;
z-index: 100;
}
.child {
position: absolute;
z-index: 999999;
}.child 虽然设置了很高的 z-index，但它属于 .parent 这个上下文，所以它的层级不会超过同级的其他层叠上下文。
六、常见层叠问题及解决方案
❓ 问题1：为什么设置了 z-index: 9999 还是被盖住了？
✅ 原因：
- 它所在的层叠上下文层级较低；
- 或者它不是定位元素（未设置
position）；
✅ 解决办法：
- 确保使用了
position； - 检查父级是否建立了新的层叠上下文；
- 提升整个上下文的层级；
❓ 问题2：为什么两个兄弟元素设置了不同的 z-index 却没有效果？
✅ 原因：
- 它们都在同一个层叠上下文中，但都没有脱离文档流；
- 或者其中一个不是定位元素；
✅ 解决办法：
- 给需要提升的元素加上
position: relative； - 设置
z-index； - 或者使用
transform、opacity等方式触发新的层叠上下文；
七、总结：如何控制层叠顺序？
| 方法 | 描述 |
|---|---|
使用 position + z-index |
控制定位元素在当前上下文中的层级 |
使用 transform、opacity 等属性 |
触发新层叠上下文，隔离层级 |
使用 z-index: -1 |
让元素位于普通内容之下 |
使用 background / border |
显示在最底层 |
| 使用负 margin 或绝对定位 | 精确控制元素位置 |
八、总结表格：层叠顺序一览表
| 层级 | 类型 | 是否受 z-index 影响 | 是否创建新层叠上下文 |
|---|---|---|---|
| 1 | 正 z-index 定位元素 | ✅ | 否（取决于其他属性） |
| 2 | z-index: 0 定位元素 | ✅ | 否 |
| 3 | 行内元素 | ❌ | 否 |
| 4 | 浮动元素 | ❌ | 否 |
| 5 | 块级元素 | ❌ | 否 |
| 6 | 负 z-index 定位元素 | ✅ | 否 |
| 7 | 背景和边框 | ❌ | 否 |
九、一句话总结
层叠顺序是由浏览器自动计算的，理解层叠上下文、z-index 的作用范围以及触发新上下文的条件，是精准控制元素堆叠层次的关键。
💡 进阶建议
- 学习 CSS Grid 和 Flex 中的层叠行为；
- 探索现代 CSS 特性（如
isolation,backdrop-filter）对层叠的影响； - 在 Vue / React 项目中使用语义清晰的组件结构避免层叠混乱；
- 使用 Chrome DevTools 查看元素的层叠上下文结构；