css定位与层叠上下文_z-index与position属性的配合使用

z-index仅对已定位元素（position为relative/absolute/fixed/sticky）生效；未定位元素设置z-index无效；层叠上下文会限制z-index比较范围，其由opacity

z-index 只对定位元素生效

如果你给一个 div 设置了 z-index: 999 却没效果，大概率是因为它没开启定位。z-index 不是“全局层级开关”，它只作用于「已定位元素」——也就是 position 值为 relative、absolute、fixed 或 sticky 的元素。

常见错误：

• 直接给 position: Static（默认值）的元素设 z-index，完全无效
• 用 position: relative 但没写 top/left 等偏移，误以为“没定位”，其实已满足 z-index 生效条件

正确做法：

/* ✅ 生效 */
.box {
  position: relative;
  z-index: 10;
}

/* ❌ 不生效 */
.box {
  z-index: 10;
}

层叠上下文（stacking context）会截断 z-index 比较范围

父元素一旦形成新的层叠上下文，子元素的 z-index 就只在该父容器内部比较，不再和外部兄弟元素比大小。哪些属性会创建层叠上下文？

立即学习“前端免费学习笔记（深入）”；

• position: relative/absolute/fixed/sticky + z-index 值不为 auto
• opacity 小于 1（如 opacity: 0.99）
• transform 不为 none（如 transform: translateZ(0)）
• Filter 不为 none
• will-change 指定上述任一属性

典型陷阱：

如果 .modal 有 opacity: 0.99，那么即使 .content 设 z-index: 9999，也永远盖不住外部 .sidebar（因为 .modal 自身 z-index 是 1，整个上下文被压在 .sidebar 下面）。

z-index 数值比较只在同层叠上下文中有效

两个元素即使数值差很大，只要不在同一个层叠上下文里，就无法直接比大小。比如：

• A 元素：父容器无层叠上下文，z-index: 100
• B 元素：父容器有 opacity: 0.99（自动创建上下文），自身 z-index: 9999

结果是 A 仍可能盖住 B —— 因为 B 所在上下文的整体层级由其父容器决定，而那个父容器的层叠等级可能很低。

调试建议：

• 用浏览器开发者工具的「Layers」面板（chrome）或「Box Model」中悬停查看 stacking context
• 临时删掉父级的 opacity、transform 等属性，确认是否是它们触发了意外的上下文
• 避免嵌套多层带 z-index 的定位容器，容易失控

position: fixed 和 position: absolute 的 z-index 行为差异

两者都受 z-index 控制，但参考系不同，导致实际覆盖关系更难预测：

• position: absolute 的层叠上下文由**最近的已定位祖先**决定；若无，则相对于初始包含块（通常是 ）
• position: fixed 始终相对于**视口（viewport）**，但它依然会被其父级的层叠上下文限制 —— 比如父元素有 transform: scale(1)，就会把 fixed 子元素也拖进新上下文里

最常踩的坑：

.parent {
  transform: translateZ(0); /* 创建新层叠上下文 */
}
.child {
  position: fixed;
  z-index: 9999;
}

此时 .child 不再相对于视口定位，而是被锁死在 .parent 的上下文中，且可能被裁剪或错位。

层叠上下文不是显式声明出来的，而是由 css 属性隐式触发的。你改一个 opacity，加一个 will-change，甚至只是升级了 Chrome 版本，都可能让原本好好的 z-index 突然失效。排查时优先看父级有没有“看起来无关紧要”的视觉属性。