z-index必须显式设置，不能依赖html顺序；position: absolute元素脱离文档流后，层叠顺序与源码顺序无关，除非全部未设z-index（等价于auto），否则任意一个设数值即打破默认顺序，且父级触发层叠上下文会限制子元素z-index作用范围。
z-index 必须显式设置，不能依赖HTML顺序
很多人以为后写的 <div> 会自动盖在前面的上面，但 <code>position: absolute 元素脱离文档流后，层叠顺序跟源码顺序无关——除非所有元素都没设 z-index，此时才按HTML顺序叠加（等价于都为 z-index: auto）。一旦任意一个设了数值，其他没设的就变成 z-index: 0，立刻打破默认顺序。
实操建议：
- 所有参与层叠的
absolute元素都必须明确写z-index，哪怕只是z-index: 1 - 避免混用
z-index: auto和数字值，容易误判层级 - 若想“后添加的自动置顶”，JS 动态插入时顺手给新元素加
z-index: 9999不如用计数器递增更可控
父容器触发层叠上下文会锁死子元素z-index范围
z-index 不是全局排名，而是局部有效。如果某个父容器设置了 opacity: 0.99、transform: translateZ(0) 或 will-change: transform，它就创建了新的层叠上下文——子元素的 z-index 只在这个父容器内部比较，再大也盖不过兄弟容器里的元素。
常见踩坑场景：
- 模态框遮罩层被父级
section的opacity拦住，怎么调z-index都不浮上来 - 轮播图卡片用了
transform做动画，结果右上角的.badge死活盖不住图片 - 调试时发现开发者工具里元素明明
z-index: 9999，却显示在底层——先查它的所有祖先是否触发了上下文
如何让新插入的absolute元素自动获得最高层级
纯CSS无法实现“自动排序”，必须靠JS干预或预设规则。最稳妥的做法是把层级控制权收归一处，而不是每个元素自己瞎设。
推荐方案：
- 用 CSS 自定义属性统一管理，比如根元素定义
:root { --z-base: 10; }，新元素动态计算z-index: calc(var(--z-base) + 1) - JS 插入时读取当前最大
z-index值（从getComputedStyle或维护一个计数器），再 +1 赋值 - 避免用极大固定值如
z-index: 999999，容易和第三方库冲突（比如 antd 默认z-index: 1050）
absolute层叠必须有共同的定位参照容器
多个 absolute 元素要能稳定层叠，前提是它们的定位基准一致。如果一个相对于 body，另一个相对于某个 position: relative 的卡片，它们根本不在同一个坐标系里，z-index 比较毫无意义。
关键检查点：
- 所有需要层叠的元素，父容器必须统一设
position: relative（哪怕只是空壳） - 确认没有漏掉某一层父元素意外设了
position: absolute或fixed，导致子元素参照错位 - 移动端慎用
will-change: transform，它会隐式创建新层叠上下文，且合成层开销大
opacity: 0.99，整个层级逻辑就失效了。
