在CSS布局里，position absolute可以让元素脱离普通文档流，根据最近的有定位属性的祖先进行偏移放置。当页面中存在多个绝对定位元素彼此覆盖时，单靠位置坐标无法决定谁显示在上层，这时就需要用z-index来控制它们的堆叠顺序。z-index只在定位元素上生效，数值越大越靠近用户视线，但前提是这些元素处于同一个层叠上下文。
absolute与z-index的基础关系
当一个元素设置position absolute后，它就变成了定位元素。如果同时设置z-index为具体整数，它会在当前层叠上下文中获得一个层级。没有设置z-index时，绝对定位元素默认以后来居上的方式覆盖前面的元素。
<div class="box"> <div class="a">A</div> <div class="b">B</div> </div>
.box { position: relative; width: 200px; height: 200px; }
.a { position: absolute; left: 20px; top: 20px; width: 100px; height: 100px; background: red; }
.b { position: absolute; left: 60px; top: 60px; width: 100px; height: 100px; background: blue; z-index: 1; }
上面代码中，B虽然写在后面且设置了z-index 1，A没有z-index，但因为同属box这个相对定位形成的层叠上下文，B会显示在A上方。
层叠上下文的影响
很多显示顺序不对的问题，是因为元素不在同一个层叠上下文。以下情况会创建新的层叠上下文：
- 根元素html
- position为absolute或relative且z-index不是auto
- opacity小于1
- transform、filter等属性不为none
如果父级创建了层叠上下文，子元素的z-index只在父级内部比较，无法越过父级与外面元素比高低。
错误示例
<div class="parent"> <div class="child">子元素</div> </div> <div class="other">外部元素</div>
.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 999; }
.other { position: absolute; z-index: 2; }
这里child的z-index再大，也只在parent内部有效，而parent整体z-index为1，所以other可能盖住整个parent。
控制显示顺序的实践建议
为了避免混乱，可以遵循下面习惯：
| 场景 | 做法 |
|---|---|
| 弹窗在最上层 | 弹窗容器直接挂body下，设position fixed与较高z-index |
| 局部重叠图标 | 在同一相对定位父级内用absolute加z-index |
| 避免被意外覆盖 | 不随意给祖先加transform或opacity，防止产生新上下文 |
简单弹窗示例
<div class="mask"> <div class="dialog">提示内容</div> </div>
.mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; }
.dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1001; background: #fff; }
通过fixed和明确的z-index，弹窗能稳定显示在所有普通内容之上。掌握absolute与z-index的配合，核心就是先看清层叠上下文的边界，再在边界内安排层级。