在网页布局中，使用 position 属性进行元素定位时，经常会出现多个元素在空间上发生重叠的情况。如果处理不当，本该显示在上层的交互组件会被下层元素遮挡，导致点击失效或视觉混乱。要解决这类问题，核心手段是利用 z-index 配合定位属性来控制元素的层叠层级。
一、为什么元素会重叠遮挡
当元素设置了 position: absolute、position: fixed 或 position: relative 并且偏移量使其与其他元素占据同一片区域时，就会发生物理上的重叠。在默认情况下，浏览器按照文档流顺序和层叠规则决定谁在上面：后来出现在 DOM 中的元素通常绘制在先出现的元素之上，但这只适用于未显式干预层级的场景。
一旦页面中存在多个浮层、弹窗、下拉菜单或吸顶导航，单纯依赖 DOM 顺序就不够可靠。比如一个底部的悬浮按钮和一个居中的模态框，若模态框在 DOM 中先写、按钮后写，按钮可能盖住模态框的关闭区域。此时必须借助 z-index 主动声明层级，否则用户会遇到“明明点了弹窗，却触发了背后按钮”的尴尬。
二、z-index 的基本用法与生效条件
z-index 只对有定位属性的元素生效，也就是 position 值为 relative、absolute、fixed 或 sticky 的元素。它接收一个整数（可为负），数值越大，元素在层叠上下文中越靠上。需要注意，z-index 为 auto 时等同于不建立新的层叠层级。
下面是一段典型的重叠与提权代码：
/* 下层卡片 */
.card-bottom {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
background: #eee;
z-index: 1;
}
/* 上层弹窗 */
.modal-top {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 150px;
background: #fff;
border: 1px solid #ccc;
z-index: 10;
}
上述代码中，尽管 .card-bottom 先布局，但 .modal-top 的 z-index 为 10，高于对方的 1，因此弹窗正确显示在卡片之上。若把 .modal-top 的 z-index 去掉或设为 0，由于它是 fixed 定位且后渲染，也可能盖住卡片，但逻辑就不够直观，维护时易出错。
三、层叠上下文是如何限制 z-index 的
很多初学者发现：给子元素写了 z-index: 9999，却依然被父级外的元素挡住。原因在于父容器自身产生了新的层叠上下文（stacking context）。当某个元素设置了 opacity 小于 1、transform 不为 none、filter 不为 none、will-change 含层叠相关属性，或显式设置 z-index 且 position 不为 static 时，它就成了层叠上下文的根。
在层叠上下文里，子元素的 z-index 只在“上下文内部”排高低，整个上下文作为一个整体去和外部比较。举例来说：父 A 的 z-index 是 1，父 B 的 z-index 是 2，A 里面有个子元素写了 z-index: 100，它也不可能压过 B，因为 A 整体低于 B。理解这一点，才能避免盲目加数字。
<div class="parent-a" style="position: relative; z-index: 1;"> <div class="child" style="position: absolute; z-index: 100;">我在A里</div> </div> <div class="parent-b" style="position: relative; z-index: 2;"> <div class="other">我在B里，但B整体更高</div> </div>
以上结构中，无论 child 的 z-index 多大，都只在 parent-a 内部有效，无法超越 parent-b。因此规划层级时，应先梳理页面的层叠上下文树，而不是孤立地给组件加值。
四、实用的层级管理策略
在真实项目中，建议用分层变量统一管理 z-index，而不是散落在各组件里写魔法数字。可以定义基础层、浮层、弹窗、提示框等级别，例如导航 100、下拉 200、模态框 1000、Toast 2000。这样既能减少冲突，也方便全局调整。
另外，尽量避免在不必要的元素上触发层叠上下文。如果仅为了动画给容器加 transform，却导致内部弹窗层级失控，可考虑把动画元素和定位元素分离。下表列出常见触发层叠上下文的属性：
| 属性 | 触发条件 | 影响 |
|---|---|---|
| opacity | 值小于 1 | 元素成为层叠上下文根 |
| transform | 非 none | 建立局部层叠上下文 |
| position + z-index | position 非 static 且 z-index 非 auto | 创建层叠上下文 |
| filter | 非 none | 产生新层叠上下文 |
当遇到遮挡 bug，可用浏览器开发者工具查看元素是否处于某个上下文内，再逆向调整父级 z-index 或重构 DOM 归属。对于第三方组件，如果其根节点已带 transform，可通过 Portal 将弹窗挂载到 body 下，跳出原上下文限制。
五、结合 JavaScript 动态控制层级
在多个弹窗依次打开的场景，静态 z-index 可能不够用。可以通过脚本在打开时动态提升当前活跃层的层级，关闭后回收。这样既保证最新弹窗永远在最前，也避免数值无限膨胀。
let currentZ = 1000;
function openModal(el) {
currentZ += 1;
el.style.position = 'fixed';
el.style.zIndex = currentZ;
document.body.appendChild(el);
}
这段代码每次调用都把当前弹窗的 z-index 在原有基础上加一，并挂到 body 上，避开父级层叠上下文干扰。配合遮罩层管理，就能写出健壮的浮层系统。归根结底，解决 css 元素定位重叠遮挡，关键是弄清定位、层叠上下文与 z-index 三者的关系，再用工程化的方式维持层级秩序。