加isolation: isolate本身不解决被盖住问题，必须同时满足三个条件：加在目标元素的直接父容器上、该容器为块级或已定位元素、且显式设置position和z-index；否则仅创建层叠上下文而不提升外部层级。
加 isolation: isolate 本身不解决“被盖住”的问题——它只划边界，不抬高度；真正起效必须同时满足三个条件：加在正确容器上、该容器有 position、且显式设了 z-index。
为什么按钮加了 isolation: isolate 还是点不动？
因为 isolation: isolate 只对**块级或已定位的直接父容器**生效，且它不做任何层级提升。常见失效场景：
- 把
isolation: isolate加在<button></button>自身或.modal-body这类内容容器上——浏览器直接忽略（非容器型元素） - 结构是
<div class="wrapper"><div class="dropdown-trigger"><button></button></div></div>，却给.wrapper加隔离——隔了一层，无效 - 容器是
position: static或没写z-index，导致它在外部仍处于 stacking level 0（最底层），内部再高的z-index也出不来
应该加在哪个 DOM 节点上？
找目标交互元素（比如下拉菜单、弹窗按钮、Tooltip 触发区）的**最近共同父容器**，且该容器必须满足：
- 是块级元素（
display: block/flex/grid）或已定位（position: relative等） - HTML 中直接包裹目标元素，中间不能有其他 wrapper
- 不是
或全局 layout 根节点（范围太大，反而加剧冲突）
例如：<div class="nav-item">
<button class="trigger"></button><div class="dropdown-menu"></div>
</div> → 隔离应加在 .nav-item 上，不是 .dropdown-menu 本身。
立即学习“前端免费学习笔记（深入）”；
哪些属性会悄悄让 isolation: isolate 失效？
如果祖先链上存在以下任一属性，它们会**提前创建层叠上下文**，把你的隔离容器包进一个“套娃上下文”里，导致隔离边界没划成：
-
opacity小于 1（包括opacity: 0.99） -
transform不为none（如transform: translateX(0)、translateZ(0)） -
filter、will-change、backdrop-filter
检查方式：Chrome DevTools → Elements → 选中容器 → Layers 面板看是否显示为 “Stacking Context Root”。若没显示，大概率是被外层属性劫持了。稳妥做法是删掉冲突属性，或把 isolation: isolate 上移到尚未被污染的更外层容器。
Safari 兼容性和书写顺序
iOS Safari 15.3 及更早版本不支持原生 isolation: isolate，必须加前缀。且顺序很重要：
.dropdown-trigger {<br> -webkit-isolation: isolate;<br> isolation: isolate;<br>}
错误写法包括：isolation: on、isolation: true、isolation: auto（这是默认值，不创建新上下文）。另外，移动端 Safari 对 position: fixed 元素会自动建上下文，这点容易被忽略。
真正麻烦的从来不是加不加 isolation: isolate，而是你加的位置有没有被祖先的 transform 或 opacity 悄悄覆盖，以及容器自身有没有获得参与外部层叠的资格——这两点漏掉任何一个，就等于白配。
