z-index只对已定位元素（position非static）生效，且受父级层叠上下文限制；常见失效原因包括未设定位属性或被opacity/transform等触发的新堆叠上下文截断。
z-index 只在定位元素上生效，没设 position（比如 relative、absolute）的元素，写再多 z-index 也没用。
为什么设置了 z-index 却没效果？
最常见原因是：元素没开启定位。CSS 规范明确要求，z-index 对 position: static（默认值）无效。
- 检查元素是否至少有
position: relative或其他非static值 - 确认没有被父容器的层叠上下文“截断”——比如父级加了
z-index: 0且带position，它就创建了新上下文，子元素的z-index只在这个内部比大小 - 避免用负值（如
z-index: -1），它会让元素沉到背景层下面，可能被父容器边框或背景盖住
z-index 数值一样时谁在上面？
同属一个层叠上下文、z-index 相同的两个定位元素，DOM 中靠后的那个会显示在前面。
- 例如：
<div style="position: absolute; z-index: 1">A</div><div style="position: absolute; z-index: 1">B</div>→ B 盖住 A - 这个规则和有没有
z-index无关——没设z-index的定位元素默认算作z-index: auto，也按 HTML 顺序排
跨父容器的 z-index 为什么互不干扰？
因为每个带 position 且 z-index 不为 auto 的祖先，都可能创建独立的层叠上下文。
立即学习“前端免费学习笔记（深入）”；
<div class="parent1" style="position: relative; z-index: 1"><div style="z-index: 999">子1</div></div><div class="parent2" style="position: relative; z-index: 0"><div style="z-index: 999">子2</div></div>- 哪怕子1的
z-index是 999、子2也是 999，最终谁在上，取决于 parent1 和 parent2 的z-index比较结果（1 > 0，所以 parent1 整体压 parent2）
真正难调的不是数值本身，而是搞清当前元素嵌在哪几层上下文中——浏览器开发者工具的「Layers」面板或「Computed」里的 stacking context 提示，比硬猜靠谱得多。
