多层div布局的层叠关系由z-index和堆叠上下文决定。1. z-index控制定位元素在z轴的显示顺序，数值越大越靠前；2. 堆叠上下文限制z-index作用范围，父元素创建堆叠上下文后，子元素的层叠仅在内部比较；3. opacity、transform、filter等属性会触发新堆叠上下文；4. 实际布局中应合理使用position、避免不必要的堆叠上下文触发，并用小范围z-index值便于维护，防止遮挡混乱。
在CSS中，多层div布局的层叠关系主要由 z-index 属性和 堆叠上下文（stacking context） 决定。理解这两者的作用机制，能帮助你准确控制元素的前后显示顺序。
z-index 控制层叠顺序
z-index 属性用于设置定位元素（position 不为 static）在 z 轴上的堆叠顺序。数值越大，元素越靠前显示。
常见取值：- auto：默认值，不创建新的层叠层级
- 数字：正数靠前，负数靠后，0 在中间层
例如：
.box1 {
position: relative;
z-index: 1;
}
.box2 {
position: relative;
z-index: 2;
}
此时 .box2 会显示在 .box1 上面。
立即学习“前端免费学习笔记（深入）”；
YIXUNCMS中秋专版2.0.4
下载
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
堆叠上下文影响实际效果
即使设置了 z-index，如果父元素创建了独立的堆叠上下文，子元素的 z-index 只在该上下文中生效，不会与外部元素直接比较。
以下情况会创建新的堆叠上下文：- 根元素（html）
- position 为 relative/absolute/fixed 且 z-index 不为 auto
- opacity 小于 1
- transform 不为 none
- will-change 设置为触发层叠的属性
- filter 不为 none
这意味着：一个 z-index 为 999 的元素，若其父容器创建了堆叠上下文且整体层级较低，仍可能被 z-index 更小但父级层级更高的元素遮挡。
如何避免层叠混乱
在多层 div 布局中，建议遵循以下实践：
- 确保需要调整层级的元素设置了 position（如 relative 或 absolute）
- 避免在无关容器上随意使用 transform、opacity 等触发堆叠上下文的属性
- 使用较小的 z-index 数值范围（如 0~10），便于维护
- 必要时通过开发者工具检查元素的层叠层级
基本上就这些。掌握 z-index 和堆叠上下文的关系，就能清晰掌控多层 div 的显示顺序，避免出现意料之外的遮挡问题。
