同级absolute元素在相同层叠上下文中，z-index值大的覆盖小的；值相同时，后出现的DOM元素覆盖前面的；若一方未设z-index（即auto），则按文档流顺序决定层叠。
两个同级absolute元素怎么比z-index
同级的 position: absolute 元素，只要在同一个层叠上下文里（比如都直接在 下），它们的堆叠顺序就只看 z-index 数值大小：数值大的盖在小的上面；数值相同时，后出现在 DOM 中的那个会盖住前面的。
- 必须确保两者都设置了非
static的position（absolute已满足） - 不能依赖“谁写在后面样式就生效”——CSS 优先级不决定层叠顺序，
z-index值和 DOM 顺序才决定 -
z-index: auto等价于没设，它不会参与比较；若一个元素设了z-index: 10，另一个没设（即auto），后者实际层叠等级可能更低（尤其当父容器无定位时） - 负数有效：
z-index: -1会让元素落到父容器背景色之下（如果父容器有背景，它就不可见）
为什么写了z-index还是被盖住
最常见原因是：两个 absolute 元素**不在同一个层叠上下文里**。比如它们分别嵌套在不同父容器中，而某个父容器悄悄触发了新层叠上下文（如加了 opacity: 0.99、transform: translateZ(0)、filter: blur(1px) 或 will-change: transform），那子元素的 z-index 就只在各自父容器内部起作用，无法跨容器比高低。
- 用 Chrome DevTools 选中目标元素，在 «Computed» 面板搜索
stacking context，显示 “Yes” 就说明它或其某个祖先已创建新上下文 - 临时删掉父容器的
transform或opacity，看遮挡是否消失——这是最快验证方式 - 不要只盯着子元素改
z-index，得往上查两层父节点有没有“结界”属性
z-index数值该设多少才靠谱
设成 999999 不解决问题，反而让后续组件（比如弹窗库、Tooltip）不敢设值，容易冲突。真正要管的是结构层级关系，不是数字本身。
- 同层叠上下文中，相邻功能层级建议间隔至少
10，例如：--z-tooltip: 500、--z-modal: 1000、--z-fullscreen-overlay: 2000 - 避免用
z-index: auto和数字混用；统一用具体整数，便于 CSS 自定义属性管理 - 第三方 UI 库（如 Ant Design、MUI）通常自带
z-index规范，你的自定义值最好避开它们的默认范围（比如 MUI Modal 默认是1300） - SSR 或 Shadow DOM 场景下，样式作用域可能重置
z-index计算，需在组件根节点显式声明定位和层级
fixed和absolute混用时的隐藏陷阱
一个 position: fixed 导航栏被 position: absolute 元素盖住，表面看是 z-index 没设，但深层原因常是：那个 absolute 元素的**某个祖先容器用了 transform**，导致整个子树被关进新层叠上下文，连带把 fixed 元素也“降级”为相对该容器定位（Safari 尤其明显）。
立即学习“前端免费学习笔记（深入）”；
-
fixed元素本应相对于视口，但一旦父容器创建了层叠上下文，它的定位参考系就变了 - 修复不是堆高
z-index，而是：要么移除父容器的transform改用top/left位移；要么把fixed元素提到document.body直接挂载 - 动画中别写
transition: z-index——浏览器静默忽略，你看到的“延迟浮现”其实是transform过渡完成时层叠上下文重建导致的视觉跳变
