position: absolute 元素脱离文档流，定位基准是最近已定位祖先而非父元素；若父元素未设 position: relative/absolute/fixed，则向上回溯至 body，导致“跑出”容器。
position: absolute 时元素为什么总跑出父容器？
因为 position: absolute 的定位基准是「最近的已定位祖先」，不是父元素本身。如果父元素没设 position: relative（或 absolute/fixed），浏览器会一路往上找，直到 <body> —— 这就是重叠失控的根源。
- 必须给父容器显式加
position: relative（哪怕其他样式都不需要） - 不要依赖默认文档流来“框住”绝对定位子元素
- 检查祖先链里是否有意外的
position: relative，它可能偷偷成了新定位上下文
z-index 不生效的三个典型场景
z-index 只对「定位元素」有效（即 position 值为 relative、absolute、fixed 或 sticky），且它的层级作用域受 stacking context 限制。常见失效不是写错了值，而是掉进了上下文陷阱。
- 父元素创建了新的 stacking context（比如有
opacity: 0.99、transform: translateZ(0)、filter: blur(1px)），子元素的z-index就只能在该父容器内部比较 - 两个兄弟元素的
z-index值都是auto，此时它们按 HTML 出现顺序堆叠，z-index根本没参与 - 用
z-index: -1想把元素塞到父背景后面？不行——父容器若没建立 stacking context，-1会让元素直接掉到<body>背后，看不见
flex / grid 布局里元素“视觉重叠”其实是层叠逻辑错位
Flex 和 Grid 本身不产生层叠（stacking），但一旦你在子项上加 position: absolute 或触发 stacking context，就和布局模型解耦了。这时候看到的“交错”，其实是定位脱离了网格轨道，又没管好 z-index 作用域。
- Grid 中用
grid-column/grid-row控制占位，但加了position: absolute后这些属性就失效了 - 想让某 item 在视觉上盖住邻居？优先用
z-index+ 定位上下文隔离，而不是靠margin拉扯或负值覆盖 - Flex 容器设了
align-items: center，子项却用top: -20px上移——这会破坏对齐预期，且容易被其他 flex 属性干扰
用 transform: translateZ() 强制提升层叠上下文的风险
加 transform: translateZ(0) 是老办法，用来“骗”浏览器新建 stacking context，从而让 z-index 生效。但它代价明显：强制 GPU 加速、可能引发模糊（尤其字体）、在低性能设备上卡顿。
立即学习“前端免费学习笔记（深入）”；
- 只在明确需要隔离层叠范围时用，比如模态框要盖住整个页面但不影响内部结构
- 避免在列表项、动画频繁更新的元素上滥用，
will-change: transform更轻量，但也要慎用 - Chrome DevTools 的 Layers 面板能直观看到哪些元素被提升为合成层——别让它满屏亮红
opacity 或 filter 悄悄截断了层级链。 
