本文详解如何在不破坏现有 dom 结构的前提下，通过调整 css 层叠上下文（stacking context），使一个外部元素视觉上“插入”到父子元素之间——关键在于避免父元素意外创建独立堆叠上下文。
在 CSS 布局中，z-index 并非全局“层级开关”，而是受层叠上下文（stacking context） 严格约束的局部属性。一旦某个元素（如 .parent）设置了 position: relative（或 absolute/fixed/sticky）并拥有 z-index（甚至 z-index: auto 时配合其他属性），它就会创建一个新的层叠上下文——此时其内部所有后代（包括 .child）的 z-index 都仅在此上下文中生效，完全无法与上下文外的元素（如 .unrelated）跨上下文比大小。
这就是你原始代码失效的根本原因：
.parent {
position: relative; /* ? 创建新层叠上下文 */
z-index: 1; /* 即使为 auto，relative + 其他条件也可能触发 */
}
.child {
z-index: 3; /* 仅在 .parent 的上下文中有效，对外不可见 */
}
.unrelated {
z-index: 2; /* 在根层叠上下文中，但无法穿透 .parent 的上下文边界 */
}✅ 正确解法：解除父元素的层叠上下文绑定，将定位与层级控制权移交至子元素。
以下是最小可行方案（已验证）：
Child element
.parent {
/* 移除 position: relative！保持默认 static */
background-color: #ccc;
height: 100px;
width: 100px;
}
.child {
position: relative; /* ? 定位锚点 + 层级载体 */
z-index: 3; /* 在根上下文中生效 */
background-color: #f00;
height: 50px;
width: 50px;
}
.unrelated {
position: absolute;
top: 25px;
left: 25px;
z-index: 2; /* 介于 .child(3) 和默认文档流(0)之间 → 成功居中 */
background-color: #00f;
height: 25px;
width: 50px;
}? 关键原理说明：
- 根元素（html>）天然构成根层叠上下文；
- 当 .parent 不再创建新上下文（即无 position + z-index 组合），.child 的 position: relative 使其直接参与根上下文的层叠排序；
- 此时三者同属一个层叠上下文：.child（z=3）→ .unrelated（z=2）→ .parent（z=auto ≈ 0），视觉顺序自然满足“无关元素夹在中间”。
⚠️ 注意事项：
- 若 .parent 必须保留 position: relative（例如用于内部绝对定位子项），可改用 isolation: isolate 强制隔离其层叠上下文，但需注意兼容性（IE 不支持）；
- 避免在 .parent 上设置 opacity
- 实际项目中，若父子结构嵌套较深，需逐级检查从 .child 到其与 .unrelated 的最近共同祖先之间是否存在任何层叠上下文创建者（如 will-change, backdrop-filter 等）。
? 总结：CSS 层叠不是“谁数字大谁在上”，而是“谁在同一个上下文里数字大谁在上”。要实现跨层级视觉穿插，本质是统一层叠上下文归属——把需要灵活调度的元素（如 .child 和 .unrelated）置于同一上下文内，而非依赖父容器的 z-index 指挥。
