isolation: isolate 仅在满足条件时创建新层叠上下文：容器须为已定位块级元素，且未被祖先的opacity/transform/filter等隐式上下文包裹。
加了 isolation: isolate 却没效果？不是属性写错了，而是容器没资格参与层叠计算——它必须是已定位的块级元素，且不能被祖先上下文“套娃”包住。
为什么 isolation: isolate 加了也没创建新层叠上下文
浏览器只在满足条件时才真正执行该声明：isolation: isolate 不是 CSS 开关，而是一条“申请建上下文”的语义指令。常见静默失效原因：
-
display: inline元素（如<span>、<button>）上加该属性，直接被忽略 - 元素是
position: static（默认值），且没设z-index，浏览器认为它不参与层叠，跳过隔离逻辑 - 父级或更外层已有
opacity: 0.99、transform: translateZ(0)、filter: blur(0)或will-change: transform—— 这些会提前创建嵌套上下文，把你的容器“关”在里面，隔离边界根本划不出去 - 加在
<table>、<tr>、<td>等原生表格元素上，因 display 类型不合规（table-cell等），声明无效
验证是否生效：打开 Chrome DevTools → «Layers» 面板 → 找对应节点，确认是否显示为 “Stacking Context Root”。不是？说明没建成功。
应该加在哪个 DOM 节点上才有效
必须加在目标区域的「直接父容器」上，且这个容器得能撑起层叠上下文：
立即学习“前端免费学习笔记（深入）”；
- 不能加在子元素上（比如别写
.modal-btn { isolation: isolate; }） - 不能隔层加（比如弹窗结构是
<div class="modal"><div class="modal-body"><button></button></div></div>，应加在.modal-body上，而不是.modal或button） - 不能加在
<body>或全局 layout 根节点上——这会让整个页面变成单一大上下文，反而加剧层级混乱 - 编辑器类场景（如 Tiptap / Quill），找实际承载内容的 wrapper，例如
div[data-slate-editor]或div.ql-editor，而非外层.editor-container
移动端真机调试尤其要注意：iOS Safari ≤ 16.6 对 position: fixed 元素自动创建上下文，所以弹窗类组件建议改用 position: absolute + 父容器 position: relative，避免隐式上下文干扰。
为什么加了 isolation: isolate 子元素还是被盖住
isolation: isolate 只划边界，不抬高度。它让子元素的 z-index 在内部比大小，但容器自己在外部仍处于默认层叠层级（stacking level 0），也就是最底层。
- 典型现象：子元素写了
z-index: 999，父容器也加了isolation: isolate，按钮还是点不动 - 必须给容器同时加
position: relative（或其他定位值）和显式z-index（如z-index: 100） - 数值不用特别大，只要比遮挡它的兄弟容器高即可
- 动态插入的容器（如 JS 创建的弹窗 wrapper）极易漏掉
position，必须显式设置
临时加 position: relative; z-index: 100 是最快验证方式；若恢复层级优先级，说明问题就出在这里。
Safari 兼容与前缀写法必须检查
截至 2026 年 9 月，Safari 15.4+ 支持原生 isolation: isolate，但 iOS 15.3 及更早版本仍需前缀：
- 正确写法：
-webkit-isolation: isolate; isolation: isolate; - 错误写法：
isolation: on、isolation: true、isolation: auto（这是默认值，不创建新上下文） - 别写成
isolation: isolate !important—— 浏览器直接无视 - 前缀必须前置，否则旧版 Safari 不识别
真正难的不是加对属性，而是判断哪一层祖先已经悄悄建了上下文——尤其是 UI 框架封装的 wrapper，可能一行 transform: scale(1) 就把你整个隔离块包进去了。
