contain: paint 会创建新的 containing block，使 position: absolute 子元素的定位基准从最近已定位祖先变为该容器自身的内容区（padding box），导致 top/left 偏移异常。
contain: paint 会创建新的 containing block
只要元素设置了 contain: paint（或 contain: layout paint、contain: strict），浏览器就会为它创建一个新的包含块（containing block）。这个行为不是副作用，而是规范明确要求的：paint 隔离必须附带新的定位上下文，否则无法保证绘制边界可控。
对 position: absolute 子元素来说，这意味着它的定位基准不再是“最近的非 static 祖先”，而是这个新生成的 containing block —— 即父容器自身的内容区（padding box）。
常见翻车现象：.tooltip 原本相对 .card 右上角定位，加了 contain: paint 后突然飘到左上角；下拉菜单 .dropdown-menu 距离触发按钮的偏移量归零。都是因为 containing block 切换导致 top/left 计算基准重置。
为什么不是所有 contain 值都触发这问题？
contain: layout 单独使用也会创建新的 containing block，但 contain: paint 更容易被误用——因为它常被当成“只管绘制不碰布局”的轻量选项，结果却悄悄改了定位逻辑。
而 contain: size 或 contain: style 不会创建 containing block；contain: none 当然不会；contain: content 等价于 layout paint style，所以同样会。
关键区别在于：只有涉及 paint 或 layout 的组合，才会强制生成新 containing block。这不是浏览器 bug，是 CSS Containment Level 1 规范第 4.2 节明确定义的行为。
怎么避免定位偏移？三步实操建议
不是不能用 contain: paint，而是得稳住定位上下文：
- 父容器必须显式设
position: relative（或absolute/fixed），且尺寸可控（如min-height: 200px），否则新 containing block 的 padding box 边界不可预测 -
绝对定位子元素的
top/left值，要按父容器内容区重新校准（例如原来写top: -10px，现在可能需改成top: 0+transform: translateY(-10px)） - 若父容器本身是
position: absolute或fixed，加contain: paint后其子元素将相对于它自身定位——此时必须确认它自身已处于正确 containing block 中，否则会双重偏移
验证是否真创建了新 containing block
光看样式声明没用。打开 Chrome DevTools → Elements 面板 → 选中该元素 → 右键 “Scroll into view” → 在 Rendering 面板勾选 “Layout Shift Regions” 和 “Paint flashing”。如果看到该容器内部有独立高亮区域，且子元素的定位参考线明显收窄到容器内边距边缘，就证实新 containing block 已生效。
更直接的方法：在 Console 执行 getComputedStyle(el).contain，返回值含 paint 或 layout，再检查该元素的 getBoundingClientRect() 是否被子 absolute 元素的 offsetParent 引用——如果是，说明它已成为 containing block。
真正麻烦的不是“会不会创建”，而是“创建后你没意识到它已经接管了定位权”。很多偏移问题拖到上线才暴露，就是因为开发时只盯着 paint 效果，忘了 layout 和 position 是绑在一起的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
