加 isolation: isolate 本身不创建有效上下文，必须同时满足三个条件：加在块级/定位的直接父容器上、该容器有 position（非 static）、且不能被祖先的隐式上下文“套娃”包住。
加 isolation: isolate 本身不创建有效上下文，必须同时满足三个条件：加在块级/定位的直接父容器上、该容器有 position（非 static）、且不能被祖先的隐式上下文“套娃”包住。
为什么加了 isolation: isolate 却没变成 stacking context root
浏览器会静默忽略该声明，常见原因有：
-
isolation: isolate加在了<button>、<span>或<td>这类默认display: inline或table-cell的元素上 —— 它们不是合法容器，不参与层叠计算 - 加在了目标元素的隔层祖先上，比如结构是
<div class="layout"><div class="menu-group"><button></button></div></div>，却给.layout加了属性，而真正该加的是.menu-group - 容器本身是
position: static（默认值），或虽设了position: relative但没配z-index（注意：z-index不是必需项，但缺它时容器仍处于外部第 0 层，DevTools 中可能不显示为 root） - 祖先链上有
opacity: 0.99、transform: translateZ(0)、filter: blur(0)或will-change: transform—— 它们提前创建了嵌套上下文，把你的容器“罩”在里面，isolation失去划界意义
怎么验证是否真生效了
别靠肉眼猜，用 Chrome DevTools 直接确认：
- 选中你加了
isolation: isolate的元素 - 右侧 Styles 面板搜索
isolation，确认值为isolate（且无 strike-through） - 切换到 Layers 面板 → 点击该节点 → 查看右下角是否明确标注
Stacking Context Root - 如果没出现，说明声明被忽略；若出现但子元素仍被盖住，问题不在隔离，而在该容器自身在外部层级太低
移动端和 Safari 必须处理的兼容细节
iOS 和 Safari 对层叠上下文极其敏感，尤其旧版本：
立即学习“前端免费学习笔记（深入）”；
- Safari 15.4+ 支持原生
isolation: isolate，但 iOS 15.3 及更早必须写前缀：-webkit-isolation: isolate，且必须放在isolation: isolate前面 - iOS Safari 会为
position: fixed元素自动创建上下文 —— 如果你在弹窗里用fixed+isolation，大概率白加；改用position: absolute+ 父容器position: relative更可靠 - 动态插入的容器（如 JS 创建的 tooltip wrapper）常漏掉
position，务必显式设置，不能依赖框架默认 - 别在
<body>或全局 layout 根节点上加 —— 整个页面变成单一大上下文，反而让z-index和mix-blend-mode更难控
真正卡住人的从来不是怎么写这行 CSS，而是得一层层往上翻 DOM，挨个检查祖先有没有偷偷用 transform 或 opacity，再判断当前容器是不是“干净”的、可定位的、紧贴目标元素的那一个。
