本文深入剖析因意外创建层叠上下文导致 z-index 失效的经典问题，以 .drop-wrapper-cont 被 .section-wrapper 遮挡为例，详解 position: relative 与 z-index 的隐式影响、层叠上下文的生成规则，以及无需重构 HTML 的精准修复方案。
本文深入剖析因意外创建层叠上下文导致 `z-index` 失效的经典问题，以 `.drop-wrapper-cont` 被 `.section-wrapper` 遮挡为例，详解 `position: relative` 与 `z-index` 的隐式影响、层叠上下文的生成规则，以及无需重构 html 的精准修复方案。
在现代 CSS 布局中，z-index 并非“全局深度控制器”，而是一个依赖于层叠上下文（stacking context）的相对值。你遇到的问题——.drop-wrapper-cont（设 z-index: 2）仍被后出现的 .section-wrapper 遮盖——并非 z-index 数值不够大，而是因为 .section-wrapper 无意中创建了一个新的、更高层级的层叠上下文，将其内部所有后代元素（包括后续 .section-wrapper 中的 .drop-wrapper-cont）都“封装”在了该上下文内，从而切断了与外部兄弟元素的层级竞争。
? 根源定位：position: relative + 隐式 z-index = 新层叠上下文
关键线索藏在你的 CSS 中：
.section-wrapper {
position: relative; /* ✅ 触发层叠上下文的条件之一 */
background: rgba(0, 0, 0, .4);
/* ... 其他样式 */
}根据 CSS 2.2 规范，当一个元素满足以下任一条件时，它就会创建一个新的层叠上下文：
-
position为relative/absolute/fixed/sticky，且z-index值不为auto（注意：即使未显式声明z-index，某些浏览器在特定条件下也可能赋予默认行为，但更常见的是——position: relative本身不自动创建上下文，除非z-index被设为非auto值）。
然而，在你的原始代码中，.section-wrapper 并未显式设置 z-index。那么问题出在哪？答案是：层叠上下文的传播具有“传染性”。一旦某个祖先（如 .border-div 或 body）因 opacity 、<code>filter、transform 等属性创建了层叠上下文，其所有后代元素的 z-index 都只在该上下文内部生效。
立即学习“前端免费学习笔记（深入）”；
回看你的 body 样式：
body {
background: linear-gradient(rgba(0,0,0, 1), rgba(0,0,0,.85)); /* ✅ 这里没有直接触发 */
/* ... */
}虽然 background 本身不触发，但请注意：.section-wrapper 使用了 background: rgba(0, 0, 0, .4) —— 这本身安全。真正危险的是：当你为 .section-wrapper 添加任何 z-index（哪怕只是 z-index: 0 或 z-index: 1），它就立即成为一个独立的层叠上下文容器。
在你反复调试时，很可能曾临时添加过 z-index 到 .section-wrapper（例如尝试设为 -1），这个操作一旦存在，就会让该 .section-wrapper 及其所有子元素（包括其内部的 .drop-wrapper-cont）脱离父级上下文，形成“孤岛”。此时，无论你把 .drop-wrapper-cont 的 z-index 设为 999，它也只在自己所属的那个 .section-wrapper 内部“最高”，却无法越过上下文边界去挑战其他 .section-wrapper 的层级。
✅ 正确解法：移除冗余 z-index，保持扁平化层叠流
正如答案所指出的，最简洁、最符合规范的修复方式是：
/* ❌ 错误：为 .section-wrapper 设置 z-index（即使为 0 或 auto）会创建新上下文 */
/* .section-wrapper { z-index: 0; } */
/* ✅ 正确：完全移除 z-index 声明，仅保留 position: relative（用于定位伪元素等） */
.section-wrapper {
position: relative;
background: rgba(0, 0, 0, .4);
box-shadow: black 0 0 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin: 10px;
animation: slideUp 1s ease-out forwards;
}
/* ✅ 确保伪元素不干扰主层级 */
.section-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid;
border-radius: 5px;
z-index: -1; /* 安全：在自身上下文中置底 */
}同时，确保 .drop-wrapper 和 .drop-wrapper-cont 的定位链清晰：
.drop-wrapper {
position: relative; /* 为 .drop-wrapper-cont 提供定位参考 */
}
.drop-wrapper-cont {
position: absolute;
z-index: 2; /* ✅ 此时有效：所有 .drop-wrapper-cont 都在同一根层叠上下文中竞争 */
display: none;
left: 100px;
box-shadow: 0px 0px 10px black;
background: rgba(0, 0, 0, 1);
border-radius: 5px;
border: 2px white solid;
}
.drop-wrapper:hover .drop-wrapper-cont {
display: block;
}⚠️ 关键注意事项与进阶建议
-
永远检查
opacity 的祖先：opacity: 0.99同样会创建层叠上下文！如果你的body或.border-div应用了透明度，需确保所有需要跨区域层级控制的元素都在同一透明度容器内，或改用rgba()背景替代opacity。 -
慎用
transform和filter：transform: translateZ(0)、filter: blur(1px)等都会强制创建新层叠上下文，调试时可临时注释它们排查。 - 验证层叠顺序：在 Chrome DevTools 的 Layers 面板（Rendering → Show layer borders）中，可直观看到哪些元素被分到了不同图层（Layer），这是判断层叠上下文是否被意外创建的最快方法。
-
替代方案（如必须分层）：若业务逻辑确实要求
.section-wrapper独立分层，可将.drop-wrapper-cont移至顶层，并用 JavaScript 动态计算位置，彻底脱离 DOM 层级束缚。
✅ 总结
z-index 失效的本质，90% 以上源于对层叠上下文的误解。它不是“谁数字大谁在上”，而是“谁在同一个上下文里数字大谁在上”。修复的核心逻辑是：保持相关元素处于同一层叠上下文中。通过移除 .section-wrapper 上任何可能触发上下文的 z-index（或 opacity/filter），并确保 .drop-wrapper 正确使用 position: relative 作为定位根，即可让 z-index: 2 在全局生效，完美解决下拉菜单被遮挡的顽疾。这既是 CSS 基础，也是专业前端开发者必须掌握的底层原理。
