加了isolation: isolate仍被盖住，根本原因是该属性仅创建新层叠上下文，不提升容器自身在外部的层级；必须同时设置position和z-index才能使其“露头”。
加了 isolation: isolate 却还是被盖住？不是属性没生效，而是它只划边界、不提层级——你得先让容器自己“浮起来”，否则整个隔离块都压在别人下面。
为什么 isolation: isolate 加了也没用？
移动端常见现象：弹窗按钮点不动、下拉菜单被轮播图遮住、Tooltip 浮层消失。根本原因不是 z-index 不够大，而是目标容器没真正成为层叠上下文根节点。
- DevTools 的 «Layers» 面板里看不到该节点标为 “Stacking Context Root” → 说明声明被忽略
- 最常被忽略的条件：
display不是block/flex/grid，或position是static - 祖先元素有
opacity: 0.99、transform: translateZ(0)或filter: blur(0)→ 这些会提前创建嵌套上下文，把你的隔离容器包进去了 - 误加在子元素上（比如直接写在
.tooltip上），而应该加在它的直接父容器（如.dropdown-menu-wrapper）
isolation: isolate 必须配合哪些 CSS 才能生效？
它不是独立开关，而是一个协作型声明。单独加 isolation: isolate 只完成一半工作。
- 容器必须是块级或已定位：至少满足
display: block/flex/grid，或带position: relative/absolute/fixed - 必须显式设置
z-index（哪怕只是z-index: 1），否则它在外部层叠顺序中默认为 0 层 - 移动端 fixed 元素自动触发上下文，所以 Modal 遮罩层和弹窗要同级挂载到
body，不能一个在 fixed 导航栏内、另一个在 body 下 - 兼容旧版 Safari（iOS 15.3 及更早）需补前缀：
-webkit-isolation: isolate
和 transform: translateZ(0)、opacity: 0.99 的关键区别
老办法能“骗”出层叠上下文，但副作用真实存在，尤其在移动端 WebView 和 iOS Safari 中。
-
opacity: 0.99会让子元素继承透明度 → 文字模糊、可访问性标签失效、与backdrop-filter冲突 -
transform: translateZ(0)强制 GPU 合成 → iOS Safari 滚动时字体发虚，还可能和will-change行为错乱 -
isolation: isolate零视觉变化、零重绘开销、语义明确，浏览器 DevTools 能清晰标记上下文边界 - 但它不解决“祖先已建上下文”的问题——如果外层卡片用了
opacity: 0.8，你在里面再套一层isolation，只会让层级更难理清
真正容易被忽略的一点
isolation: isolate 创建的是新层叠上下文，但这个“新根”自身的位置，由它自己的 position 和 z-index 决定。很多人加完就以为万事大吉，结果整个容器还卡在第 0 层，内部再高的 z-index 也出不去。检查是否生效，唯一可靠方式是打开 Chrome DevTools 的 «Layers» 面板，确认目标节点是否真的显示为 “Stacking Context Root”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
