isolation: isolate 本身不创建新层叠上下文，仅声明意图，生效需同时满足：元素为块级或已定位（display为block/flex/grid，或position非static），且祖先未提前创建层叠上下文。
isolation: isolate 本身不创建“新层叠上下文”——它只是声明“我要建”，但是否生效，完全取决于元素是否满足参与层叠计算的硬性条件。
为什么加了 isolation: isolate 却没变成 stacking context root
浏览器会静默忽略该声明，常见原因有三个：
-
display不是block、flex、grid或table（注意：table元素本身不支持，需用div包裹） -
position是static（默认值），必须显式设为relative、absolute、fixed或sticky - 祖先链上已有其他触发层叠上下文的属性（如
opacity: 0.99、transform: scale(1)、filter: blur(0)），导致你的容器被“包进”已有上下文中，无法成为新根节点
验证是否生效：打开 Chrome DevTools → «Layers» 面板 → 找到对应节点，看是否显示为 “Stacking Context Root”。不是？说明声明没起作用。
isolation: isolate 必须加在谁身上才有效
它只对**直接父容器**生效，且该容器必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 是块级或已定位元素（
display: block/flex/grid，或带position: relative等） - 不能是
<button></button>、<span></span>这类 inline 元素（哪怕加了position: relative也不行） - 不能隔层——比如想让
.tooltip-content内部 z-index 生效，就得加在.tooltip上，而不是.tooltip-content自己
错误示例：.btn { isolation: isolate; }（button 是 inline）；.modal-footer > .btn { isolation: isolate; }（加在子元素上，无效）。
加了 isolation: isolate 还是被盖住？缺了关键两步
isolation: isolate 只划边界，不抬高度。它让子元素的 z-index 在内部比大小，但容器自己仍在 stacking level 0（最底层）。所以必须补上：
- 给容器加
position: relative（或其他非static值） - 给容器加显式
z-index（哪怕只是z-index: 1），数值只要比遮挡它的兄弟容器高即可
典型场景：下拉菜单被导航栏压住，导航栏父容器用了 transform: translateZ(0) → 在下拉菜单的直接父 <div class="dropdown-menu"> 上加：<code>position: relative; isolation: isolate; z-index: 100;
移动端和 Safari 的兼容性陷阱
iOS Safari 15.3 及更早版本不支持原生 isolation: isolate，必须加前缀：
.blend-container {
-webkit-isolation: isolate;
isolation: isolate;
}
另外要注意：
- Safari 对
position: fixed元素自动创建层叠上下文，可能干扰你的隔离逻辑 - 很多 UI 框架默认给根容器加
opacity: 0.99或will-change: transform，它们会提前建上下文，让你的isolation白加 - 别写成
isolation: on或isolation: true—— 合法值只有auto和isolate
真正容易被忽略的是：你加了 isolation: isolate，却忘了检查祖先有没有偷偷创建上下文。一旦被包进去，就不是“隔离”，而是“扩大污染范围”。
