多层定位本质是包含块与层叠上下文的嵌套；每层 absolute 元素需父元素显式设 position（relative/absolute/fixed/sticky）或触发包含块的属性（如 transform），否则定位基准错乱；z-index 失效多因中间层意外创建 stacking context。
多层定位的本质是 stacking context 和包含块的嵌套
CSS 中所谓“多层定位”，不是靠 position 层级叠加实现的，而是由每个 position: relative、absolute 或 fixed 元素创建新的包含块（containing block）和可能的层叠上下文（stacking context）。父容器是否生成包含块，直接决定子元素 top/left 的参考基准。
常见误解是“只要加 position: relative 就能当定位根”，但实际只有满足以下任一条件时，该元素才成为子 absolute 元素的包含块：
- 其
position值为relative、absolute、fixed或sticky - 其
transform、opacity、filter等属性不为默认值（会隐式创建包含块，但注意：这可能导致absolute子元素脱离文档流后位置偏移）
三层嵌套定位的典型写法与陷阱
比如要实现「弹窗内带可拖拽标题栏，标题栏右上角有关闭按钮」这种三层结构：外层容器 → 弹窗 → 标题栏 → 关闭按钮。关键在每一层的 position 组合是否让下一层获得正确的定位锚点。
错误写法：弹窗 用 position: absolute，但父容器没设 position: relative，导致弹窗相对于视口定位，而非预期的某个卡片内部；关闭按钮 设了 position: absolute，但它的父元素（标题栏）没设 position，结果按钮按 body 定位，飘走。
立即学习“前端免费学习笔记（深入）”；
正确链路示例：
.card { position: relative; } /* 卡片：提供第一层包含块 */
.modal { position: absolute; top: 20px; left: 50%; } /* 相对于 .card 定位 */
.header { position: relative; } /* 标题栏：提供第二层包含块 */
.close-btn { position: absolute; top: 8px; right: 8px; } /* 相对于 .header 定位 */注意：.header 必须显式设 position: relative（哪怕不设偏移），否则 .close-btn 会继续向上找包含块——可能跳到 .modal 或更外层，造成错位。
z-index 失效？大概率是 stacking context 断层了
多层定位中 z-index 不生效，90% 是因为中间某层无意中创建了新的层叠上下文，把后续层级“截断”了。例如：
-
.modal设了z-index: 10，但它的父.card同时有opacity: 0.99→ 此时.card成为 stacking context 根，.modal的z-index只在.card内部有效 -
.close-btn的z-index: 999比.modal高，但因.header有transform: translateZ(0)，它自己成了新 stacking context，.close-btn的层级只在.header内比较
排查方法：浏览器开发者工具中检查元素的 “Layers” 面板或 computed z-index，看是否显示 “z-index ignored — element is not positioned” 或 “stacking context root”。
移动端适配时 position: sticky 的嵌套限制
position: sticky 在嵌套中行为特殊：它只对最近的滚动祖先生效，且父容器不能有 overflow: hidden / auto（除非该父容器本身是滚动容器），否则 sticky 元素会被“卡住”在父容器边界内。
例如在 modal 内做 sticky 标题栏：
- 如果
.modal有max-height: 60vh; overflow-y: auto，那么.header { position: sticky; top: 0 }只会在.modal内部粘滞，不会超出 modal 范围 - 若希望标题栏粘在 viewport 顶部，则
.header必须脱离.modal的滚动上下文——要么把.header移到.modal外，要么让.modal不产生滚动，改由 body 滚动
没有万能嵌套方案，每一层的 position 类型、包含块来源、是否触发 stacking context，都得按需验证。最稳的方式是：每加一层 absolute，就确认它的父元素是否已显式设置 position 且未意外创建隔离的层叠上下文。
