当CSS元素因定位脱离文档流而重叠时，可通过z-index控制堆叠顺序：1. 元素需设置position为absolute、fixed或relative；2. z-index值越大层级越高；3. 注意层叠上下文影响，合理规划数值避免冲突。
当多个CSS元素发生定位重叠遮挡时，可以通过 z-index 属性来控制它们的堆叠顺序，从而解决遮挡问题。z-index 决定了元素在Z轴上的层级，数值越大，元素越靠前。
为什么会出现元素重叠遮挡？
元素使用了 position: absolute、fixed 或 relative 等定位属性后，可能会脱离正常的文档流，导致多个元素占据同一空间区域，出现视觉上的重叠。
默认情况下，后渲染的元素会覆盖前面的元素（即“后来居上”），但这种顺序无法满足复杂布局需求。
使用 z-index 控制层级
为定位元素设置 z-index 可以明确指定其显示层级：
立即学习“前端免费学习笔记（深入）”；
- z-index 值为整数（正、负、零均可）
- 值越大，元素越靠前
- 只有定位元素（position 不为 static）才支持 z-index
示例：
.element-a {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.element-b {
position: absolute;
top: 30px;
left: 30px;
z-index: 2; / 在 element-a 上方 /
}
常见注意事项
使用 z-index 时需注意以下几点，避免设置无效：
- 元素必须有定位属性（如 relative、absolute、fixed），否则 z-index 不生效
- 避免滥用过大的 z-index 值（如 9999），建议按模块合理规划层级范围
- 注意层叠上下文（stacking context），父元素的 z-index 可能影响子元素的堆叠范围
基本上就这些。只要正确设置 position 和 z-index，就能轻松控制元素的前后关系，解决重叠遮挡问题。
