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 快速验证：
- 选中疑似被压住的元素 → 右侧 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 面板扫一眼，比硬调数值快十倍。
