contain: paint 会触发独立层叠上下文，导致子元素 z-index 仅在内部生效而无法影响外部；它无需 position 或 opacity 即可创建该上下文，且 devtools layers 面板中显示绿色边框可辅助识别。

contain: paint 本身不直接改变层叠顺序，但它会触发新的层叠上下文（stacking context），导致内部 z-index 失效于外部——这是错乱的根源。

为什么 contain: paint 会让 z-index 突然失效？

只要元素设置了 contain: paint，浏览器就必须将其内容隔离绘制，而隔离绘制的前提是创建独立的层叠上下文。这意味着：它的子元素无论 z-index 设多大，都只能在它内部排序，无法越过它去盖住兄弟元素或祖先的其他子树。

• 常见误判：以为只是“画布裁剪”，其实它悄悄加了一层 z-index 隔离墙
• 特别隐蔽的是，contain: paint 不需要 position 或 opacity 就能单独触发层叠上下文——这点和 transform、opacity 不同
• DevTools 的 Computed 面板里看不到 “stacking context” 字样，但 Layers 面板中该元素会显示绿色边框（Chrome）

如何确认是 contain: paint 导致的层级错乱？

别猜，用 DevTools 快速验证：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 选中疑似被压住的元素 → 右侧 Computed 标签页 → 拉到底找 Containing Block 和 Stacking Context 字段
• 如果它父级的 contain 值含 paint，且该父级在 Layers 面板中带绿色描边，基本就是它
• 临时删掉父级的 contain: paint（或改写为 contain: layout），看层级是否立刻恢复正常

修复方案：按场景选最轻量解法

不是所有情况都要删 contain: paint，关键是把层叠锚点拉到同一上下文里：

• 若目标元素（如弹窗、下拉菜单）需盖住 contain: paint 容器外的内容 → 把它提到**同一个定位祖先下**，并确保该祖先没被 contain: paint 包裹
• 若必须保留 contain: paint（比如防重绘抖动），就在容器上**同时加 contain: style paint**：它能维持绘制隔离，又避免意外切断定位/层叠上下文（Chrome 85+ / Firefox 103+ 支持）
• 若兼容老内核（如 Electron 13~17），且不能升级 contain 写法 → 改用 will-change: transform 替代 contain: paint 做轻量合成提升，它虽也建层叠上下文，但更可控、副作用小

真正麻烦的不是 contain: paint 本身，而是它常和 transform、opacity 一起出现——多重层叠上下文嵌套后，z-index 就像被关进好几层保险柜，钥匙还丢了。动手前先用 Layers 面板扫一眼，比硬调数值快十倍。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！