同级absolute元素在相同层叠上下文中且均未设z-index（即z-index: auto）时，层叠顺序由DOM出现顺序决定：后写的覆盖先写的；z-index: auto不参与数值比较，等价于未设置。
同级 position: absolute 元素的层叠顺序由 DOM 顺序决定
当两个 position: absolute 元素处于同一层叠上下文、且都未设置 z-index（或都为 z-index: auto）时，浏览器按它们在 HTML 中的出现顺序决定谁在上：后写的元素渲染时会覆盖先写的。这不是 CSS 优先级规则，而是层叠顺序（stacking order）中“文档流顺序”这一默认层级规则在起作用。
z-index: auto 不参与比较，等价于“没设”
很多人误以为没写 z-index 就等于 z-index: 0，其实不是。在现代浏览器中（IE8+），z-index: auto 的定位元素不会生成新的层叠上下文，也不参与同级 z-index 数值比较——它直接退回到由 DOM 顺序决定层叠位置。这意味着：
- 若 A 元素写了
z-index: 10，B 元素没写（即z-index: auto），A 一定盖在 B 上 - 若 A 和 B 都没写
z-index，谁在 HTML 里靠后，谁就显示在上层 - IE6/7 是例外：它们把
z-index: auto当作0处理，容易引发兼容性错觉
为什么加了 position: relative 的父容器就“不管用”了
常见错误是给两个 absolute 元素套了同一个 position: relative 父容器，却仍发现后写的被前写的盖住——问题往往出在父容器本身触发了新层叠上下文。比如父容器加了 opacity: 0.99、transform: translateZ(0) 或 will-change: transform，就会强制创建新层叠上下文，导致子元素的 z-index 只在该父容器内生效，彼此无法跨容器比大小。此时即使子元素设置了不同 z-index，也压不过另一个父容器里的元素。
调试时最容易忽略的一点
用浏览器开发者工具检查元素时，只看 z-index 值远远不够。必须点开“Computed”面板，确认该元素是否真的处于你认为的那个层叠上下文中——重点看 stacking context 一栏是否显示 “Yes”，以及它的“Containing stacking context”是谁。很多看似“同级”的 absolute 元素，实际分属不同层叠上下文，z-index 根本不在一个维度上比。
立即学习“前端免费学习笔记（深入）”；
