isolation: isolate仅创建新层叠上下文，不提升容器自身层级；须加在块级或定位容器上，配合position和z-index才能生效，且Safari 15.4前需前置-webkit-isolation。
isolation: isolate 不能“重置”已有层叠上下文，它只创建新的、干净的边界；想让它生效，必须加在块级/定位容器上，并配 position + z-index，否则内部 z-index 依然被外层压制。
为什么 isolation: isolate 加了却像没加？
常见现象是：给弹窗父容器加了 isolation: isolate，子元素设了 z-index: 9999，结果还是被导航栏盖住。
- 根本原因不是属性失效，而是该容器自身在外部层叠顺序中仍处于默认层级（
z-index: auto+position: static） -
isolation: isolate只让容器成为新层叠上下文的「根节点」，不改变它自己在父级中的位置 - 如果外层已有
opacity: 0.99或transform: scale(1)，你的隔离容器可能已被包进另一个上下文中，变成「子上下文」而非「根」
必须加在谁身上？不能加错位置
它对 <span>、<em> 这类 inline 元素无效，也不作用于未定位的普通块元素。
- 目标必须是 display 为
block、flex或grid的容器，或已声明position: relative/absolute/fixed - 加在「最近共同父容器」上——比如下拉菜单结构是
<nav><div class="dropdown-wrapper"><ul class="menu">...</ul></div></nav>，就加在.dropdown-wrapper，不是.menu也不是<nav> - 在编辑器类场景（如 Tiptap），找类似
div[data-slate-editor]或div.ql-editor这类 wrapper 节点，别加在<body>或全局 layout 上
Safari 和 Android WebView 的兼容写法
Safari 15.4（iOS 15.4）才原生支持，更早版本会静默忽略；Android 6.x 及更早 WebView 完全不识别。
立即学习“前端免费学习笔记（深入）”；
- 必须写前缀且顺序严格：
-webkit-isolation: isolate必须在isolation: isolate之前 - 错误写法：
isolation: isolate; -webkit-isolation: isolate;—— Safari 15.4+ 会跳过前缀，旧版看不到声明 - 正确写法：
.modal-overlay {<br> -webkit-isolation: isolate;<br> isolation: isolate;<br>} - 永远别写
isolation: on或isolation: true，只有isolate是有效值
验证是否真正生效的三个动作
别靠眼睛猜，用 DevTools 确认它是不是真的成了新上下文的根。
- 打开 Chrome / Edge 的 «Layers» 面板，找到目标节点，确认显示为 “Stacking Context Root”
- 右键该元素 → «Show stacking context»，看它的上下文是否独立于祖先（尤其检查有没有被
opacity或filter包裹） - 检查 computed 样式中
display和position是否如预期生效——有时 CSS 优先级或继承覆盖会让声明“存在但不执行”
最容易被忽略的一点：isolation 不是 z-index 的快捷键，它是上下文的分界线。划完界之后，你得亲手把这条界线「抬高」——靠 position 和 z-index 让它在外部世界里站稳脚跟。否则，再干净的内部秩序，也挡不住外面一层压过来。
