contain: layout 会让 position: absolute 子元素“消失”是因为它创建独立布局上下文，截断与外部定位祖先的关联，导致绝对定位元素以视口为 containing block 而偏移出界；修复推荐用 contain: style layout。
contain: layout 为什么会让 position: absolute 子元素“消失”
根本原因是 contain: layout 会为元素创建一个独立的布局上下文（layout containment），它会截断其内部元素与外部定位上下文（containing block）的关联。如果某个 position: absolute 元素的最近非-static 定位祖先本该是父容器外的某个 position: relative 或 position: fixed 元素，而该父容器加了 contain: layout，那么这个绝对定位元素就会重新以视口（viewport）为 containing block —— 但更常见的是因层级裁剪或坐标系重置导致视觉上“偏移出界”或被隐藏。
修复方式：用 contain: style layout 替代纯 layout
contain: layout 单独使用时，不包含对 position 和 z-index 的隔离控制；而加上 style 后，浏览器会保留对定位上下文和层叠上下文的感知能力，避免绝对定位子元素“脱离预期父级”。
- ✅ 推荐写法：
contain: style layout（兼容 Chrome 85+、Edge 85+、Firefox 103+） - ❌ 避免写法：
contain: layout或contain: strict（后者等价于layout style paint size，但某些旧版 Chromium 对strict的z-index处理仍有 bug） - ⚠️ 注意：
contain: paint本身不解决定位丢失，但它能防止溢出裁剪干扰视觉呈现，常与style layout组合使用
当必须用 contain: layout 且无法改用 style 时，手动重建定位上下文
适用于需支持较老内核（如 Electron 13~17 内嵌 Chromium 91 前）或遇到 contain: style layout 触发渲染异常的边缘 case。
- 在目标
absolute元素的**直接父容器**上显式添加position: relative（即使它原本没定位需求） - 确保该父容器未被
transform、filter、opacity 等属性意外创建新的 stacking context，否则可能影响 <code>z-index层级预期 - 若父容器本身已是
position: relative，检查是否被contain: layout“覆盖”了其定位能力 —— 此时可尝试将contain下移到子级，或用contain: size+will-change: transform替代做轻量优化
验证是否真由 contain 引起：快速诊断步骤
别急着改 CSS，先确认问题根源：
- 打开 DevTools → Elements 面板，选中疑似“消失”的绝对定位元素，看右侧面板中 Computed 标签页下的
Containing Block字段值是否变成viewport（而非你期望的某个 relative/fixed 祖先） - 临时删掉父级的
contain声明，观察元素是否立刻回归正常位置 - 检查父容器是否有
overflow: hidden或clip-path—— 这些会和contain: layout叠加造成双重裁剪，让元素不可见但仍在 DOM 中
真正棘手的不是 contain 本身，而是它和定位上下文、层叠上下文、以及渲染管线中 layout/paint 分离机制之间的隐式耦合。一旦出现异常，优先查 Containing Block 而不是猜 z-index。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
