contain 会创建新的包含区块和层叠上下文，导致 position: fixed/absolute 定位参考系及 z-index 层级被截断在容器内，常见于 contain: layout/paint 触发的隔离行为。
contain 会创建新的包含区块和层叠上下文
这是最直接的原因：contain 不只是性能开关，它强制浏览器为该元素建立隔离边界——包括新的**包含区块（containing block）** 和新的**层叠上下文（stacking context）**。这意味着：position: fixed、position: absolute 的定位参考系，以及 z-index 的层级范围，都会被截断在 contain 容器内部。
常见错误现象：position: fixed 子元素不再相对于视口定位，而是“卡”在 contain 容器内；z-index 值再大，也盖不过容器外同级的兄弟元素。
-
contain: paint或contain: layout就足以触发新层叠上下文（不需要z-index） -
contain: strict或contain: content会同时启用 layout + paint + size，必然生成新包含区块 - 即使父容器是
position: relative，只要加了contain: layout，它的子元素用position: absolute时，参考的就不再是这个父容器，而是更上层的非 contain 祖先（或初始包含块）
fixed 元素在 contain 容器里会失效
position: fixed 的本质是相对于视口定位，但一旦父元素设置了 contain: paint 或更强的值，浏览器会把它当作一个“渲染孤岛”，并重定义其包含区块——此时 fixed 元素的定位锚点被降级为该 contain 容器的边界，而不是视口。
使用场景：比如轮播图组件里加了 contain: paint 优化动画性能，结果里面的“下一页按钮”设了 position: fixed 却贴着轮播区域右下角不动，拖动页面也不跟着滚动。
- 这不是 bug，是规范行为：W3C 明确规定 contain 容器会成为 fixed 元素的新 containing block
- 修复方法只有两个：把 fixed 元素移出 contain 容器；或改用
position: absolute+transform: translate()模拟固定效果 -
contain: style不影响定位，但单独使用意义不大；contain: size也不影响，但它要求尺寸静态，否则可能被浏览器忽略
contain: layout 对绝对定位祖先的破坏性
当一个本该作为 position: absolute 子元素“包含块”的父容器，被加上 contain: layout，它的布局能力就被隔离了——它不再参与外部布局计算，也不再能为后代提供可靠的定位上下文。
典型表现：子元素设置 top: 0; right: 0，却跑到页面左上角；或者整个模块错位、尺寸塌陷。
- 根本原因：contain: layout 要求浏览器“不检查后代来决定自身尺寸”，于是它无法正确推导出作为 containing block 所需的宽高信息
- 不是所有 relative 父容器都能安全加
contain: layout，尤其当子元素依赖其 padding/border/scrollbar 或动态内容撑开高度时 - 如果必须用 contain 且需要 absolute 定位，优先选
contain: paint（开销小、不影响定位逻辑），或确保父容器有明确 width/height 声明
为什么不能无脑写 contain: strict
contain: strict 是最“彻底”的隔离，等价于 contain: layout paint size，但它对定位和层级的副作用也最重。很多开发者以为“越严格越安全”，结果反而让弹窗、Tooltip、Portal 渲染的内容被裁剪或定位错乱。
容易踩的坑集中在动态内容场景：
- 评论区、聊天消息流这类高度不确定的容器，加
contain: strict后，浏览器无法缓存布局结果，每次插入新消息都可能触发全量 layout check，性能反而下降 - 第三方 UI 库组件（如 DatePicker、Select 下拉）若被包裹在
contain: strict容器里，其 portal 到body的浮层会被contain: paint裁剪，直接消失 - Chrome 107+ 支持
contain-intrinsic-size配合contain: size缓解高度问题，但 Safari 17.4+ 才支持，Firefox 至今不支持（2026 年 8 月仍无进展）
真正关键的不是“要不要用 contain”，而是“用哪个值、在哪一层、是否允许子树溢出”。定位和层级变化从来不是副作用，而是隔离机制的必然结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
