isolation: isolate仅强制创建新层叠上下文，不直接控制混合或层级；需加在块级或定位的父容器上，配合position和z-index生效，对inline元素及原生表格元素无效。
isolation: isolate 不是“开启混合”或“提升层级”的开关，它只做一件事：强制让当前元素成为新层叠上下文的根节点。加了它，不代表子元素自动浮起、也不代表混合立刻被框住——必须满足结构和定位条件，否则浏览器直接忽略。
为什么加了 isolation: isolate 却没创建层叠上下文
最常见原因是元素不满足「可参与层叠计算」的基本资格：
-
display是inline或inline-block→ 无效（需是block、flex、grid或已定位元素） - 没设
position（static不行，必须是relative、absolute或fixed）→isolation: isolate声明被静默丢弃 - 写成
isolation: on或isolation: true→ 只有isolate是合法值 - 用在
<table>、<tr>、<td>上 → 这些原生表格元素默认 display 类型不支持，必须外裹<div>
配合 mix-blend-mode 隔离混合时，该加在谁身上
不是加在要混合的那个元素上，而是加在它的**最近共同父容器**上：
- 错误写法：
<div class="highlight" style="mix-blend-mode: multiply; isolation: isolate;">→ 无效，isolation对 inline 级行为无意义，且不解决边界问题 - 正确写法：
<div class="editor-wrapper" style="position: relative; isolation: isolate;"><div class="highlight" style="mix-blend-mode: multiply;"></div></div> - 这样，
.highlight只跟.editor-wrapper内部其他子元素混合，不再和body背景、导航栏等外部内容混色 - Safari 14 及更早需补前缀：
-webkit-isolation: isolate
解决 z-index 失效时，isolation: isolate 和 z-index 怎么配
isolation: isolate 自身不接受数值，也不提升容器层级；它只是划定一个“内部比大小”的范围。真正让子元素浮起来，靠的是两步：
立即学习“前端免费学习笔记（深入）”；
- 给容器加
position: relative（或其它定位值）+ 明确的z-index（如z-index: 100），让它在外部上下文中获得高度 - 再给子元素设
position+z-index，它们才在这个新上下文里按数值排序 - 如果容器祖先已有
opacity、transform或filter，会提前形成嵌套上下文——你的隔离容器可能被包在里面，反而扩大干扰，得先理清结构 - Chrome DevTools 的 «Layers» 面板里确认该节点是否标为 “Stacking Context Root”，这是唯一可信验证方式
真正容易被忽略的点是：它不改变布局流、不触发重排重绘、也不影响渲染质量，但也不会帮你绕过定位规则或祖先限制。你划的那条线很干净，但线外的世界依然按原有规则运行——别指望它单方面“修复一切”。
