使用z-index可解决CSS盒模型中元素遮挡问题，需确保元素已定位（如relative、absolute等），并通过合理设置z-index值控制层叠顺序，注意父元素层叠上下文影响及样式优先级，避免滥用高数值。
当CSS盒模型中的元素出现遮挡内容的情况，通常是因为元素的层叠顺序（stacking order）导致的。解决这类问题的关键是使用 z-index 属性来调整元素的显示优先级。
理解元素为何会遮挡内容
在网页布局中，元素默认按照文档流从上到下、从后到前堆叠。某些情况下，如使用了 position: absolute、fixed 或 relative 的元素，可能会脱离正常流并覆盖其他元素。如果未明确设置层叠顺序，浏览器会按默认规则渲染，容易造成内容被遮挡。
使用 z-index 控制层叠顺序
z-index 可以控制定位元素在 Z 轴上的堆叠顺序。值越大，元素越靠前。注意：z-index 只对已定位元素（即 position 值为 relative、absolute、fixed 或 sticky）生效。
- 给需要显示在上方的元素设置较高的 z-index 值，例如：
z-index: 10; - 被遮挡的元素则设置较低值，或保持默认（auto）
- 避免随意使用极大数值（如 9999），建议按层级合理规划（如 10、20、30）
常见注意事项和陷阱
即使设置了 z-index，有时仍无法正常显示，可能是以下原因：
立即学习“前端免费学习笔记（深入）”；
- 父元素形成新的层叠上下文：如果两个元素的父容器分别设置了不同的 z-index 或 transform、opacity 等属性，会创建独立的层叠上下文，子元素只能在各自上下文中比较层级，无法跨父级比较。
- 未设置 position：忘记给元素添加 position 属性会导致 z-index 失效。
- 选择器优先级问题：确保样式正确应用，可通过开发者工具检查最终生效的 CSS。
实际示例
假设有一个弹窗被顶部导航栏遮挡：
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
<p>.modal {
position: absolute;
top: 60px;
left: 50%;
z-index: 200; /<em> 高于导航栏 </em>/
}</p>通过将 .modal 的 z-index 设置为高于 .navbar，即可解决遮挡问题。
基本上就这些。关键在于理解定位机制与层叠上下文的关系，合理使用 z-index 调整优先级，就能有效解决元素遮挡问题。
