要实现CSS层叠效果需先设置定位属性，再通过z-index控制层级。1. z-index仅对position为relative、absolute、fixed或sticky的元素生效；2. 数值越大层级越高，同级元素中z-index大者覆盖小者；3. 层叠上下文会影响层级关系，父元素创建上下文后子元素层级受限于父级；4. 实际应用中应合理规划z-index值，如基础内容用0或负数，导航设10~50，模态框用100以上，避免滥用极大值导致维护困难。
要使用CSS实现元素的层叠效果，关键在于正确结合 z-index 和 定位属性（position）。z-index 只对已定位的元素生效，因此必须先设置 position 属性才能让 z-index 起作用。
1. 定位是前提：启用z-index的基础
z-index 控制元素在Z轴上的堆叠顺序，数值越大越靠前。但只有当元素的 position 值为 relative、absolute、fixed 或 sticky 时，z-index 才会生效。
如果元素保持默认的 static 定位，即使设置了 z-index，也不会有任何层叠变化。
- 设置 position: relative; 可以不改变布局位置，同时启用 z-index
- absolute 用于脱离文档流的精确定位
- fixed 适用于固定在视口的元素，如导航栏
2. 使用z-index控制堆叠顺序
在已定位元素上设置 z-index 数值，浏览器会根据该值决定谁在上层。默认值为 auto（相当于0），正数层级更高，负数则置于底层。
立即学习“前端免费学习笔记（深入）”；
示例：
.box1 {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.box2 {
position: absolute;
top: 40px;
left: 40px;
z-index: 2; /* 会显示在box1之上 */
}
注意：两个同级元素中，z-index 较大的覆盖较小的。
3. 避免层叠上下文陷阱
层叠上下文会影响 z-index 的表现。每个元素都属于某个层叠上下文，而子元素的 z-index 是相对于其父容器的上下文。
常见触发层叠上下文的情况包括：
- 根元素（html）自动创建
- 设置 opacity 小于 1
- transform 不为 none
- position: fixed 或 sticky
- 设置了 z-index 且 position 不为 static
例如：父A的 z-index 是 1，父B是 2，那么即使A的子元素设置 z-index 为 999，它依然在B之下，因为父级上下文决定了整体层级。
4. 实际应用场景建议
在开发弹窗、下拉菜单、轮播图等需要层级管理的功能时，合理规划 z-index 值更利于维护。
- 基础内容用 0 或负数
- 头部导航、悬浮按钮设为 10~50
- 模态框、提示框可用 100 以上
- 避免随意使用 9999 这类“最大值”，防止后期扩展困难
基本上就这些。掌握定位与 z-index 的配合，再留意层叠上下文的影响，就能精准控制页面元素的前后关系。不复杂但容易忽略细节。
