加了 isolation: isolate 子元素仍被盖住，根本原因是该属性仅创建新层叠上下文，不提升容器自身在外部的层级；必须同时设置 position 和 z-index 才能使其“露头”。
为什么加了 isolation: isolate 子元素还是被盖住？
根本原因不是 isolation: isolate 失效，而是它只创建新层叠上下文，不提升容器自身在外部的层级。如果该容器没定位、z-index 是 auto，它在父级上下文中默认处于第 0 层——内部再高的 z-index 也出不去。
- 必须同时给容器加
position: relative（或absolute/fixed）和明确的z-index（如z-index: 100） - 用 Chrome DevTools 的 «Layers» 面板确认该节点是否显示为 “Stacking Context Root”
- 检查祖先是否已有
opacity: 0.99、transform: translateZ(0)或filter——这些会提前创建嵌套上下文，把你的隔离容器包进去，反而扩大干扰范围
给谁加 isolation: isolate？不是弹窗，是它的直接父容器
常见错误是把 isolation: isolate 加在 Tooltip、下拉菜单、代码高亮块这些子元素上。它对 inline 元素无效，也不作用于已定位的子元素；只对块级容器生效，且必须是目标组件的「最近共同父容器」。
- 在 Tiptap/Slate/Quill 编辑器中，找
div[data-slate-editor]或div.ql-editor这类 wrapper 节点 - 确保该容器是
display: block、flex或grid，或已设position - 别加在
body或全局 layout 容器上——那等于把整个页面变成一个“大结界”，反而加剧冲突
isolation: isolate 和 transform: translateZ(0) 的关键区别
老办法靠 transform: translateZ(0) 强制升层，副作用明显；isolation: isolate 是纯语义控制，零视觉扰动、零性能扰动，只干“划界”这一件事。
-
transform: translateZ(0)强制 GPU 合成，在 Safari 中易与will-change冲突，滚动时字体发虚 -
opacity: 0.99会让子元素继承透明度，影响可访问性，还可能让文字模糊 -
isolation: isolate不改变布局流，不触发重排重绘，兼容 Chrome 52+、Firefox 50+、Safari 15.4+（iOS 15.4+） - 注意：Safari 14 及更早需补前缀
-webkit-isolation: isolate，且永远别写成isolation: on或isolation: true
mix-blend-mode 混合污染？isolation: isolate 是边界，不是开关
当你在编辑器里用 mix-blend-mode: multiply 做语法高亮，却看到关键字和 body 背景混出奇怪色块，这不是 bug，是混合跨了上下文。此时 isolation: isolate 的作用很具体：它让容器自身成为混合边界，子元素只跟容器内其他兄弟混合，不再和导航栏、侧边栏背景混合。
- 必须加在混合区域的直接父容器上，而非子元素本身
- 该容器仍需满足块级 + 定位条件，否则声明被忽略
- 若该容器本身需浮在其他模块之上（如 Modal 标题栏），额外设
z-index才能确保它“露头”
isolation: isolate 只是划了边界，但这个“边界”的位置，由它自身的 position 和 z-index 决定——不是加了就万事大吉，而是得先让它在外部站稳脚跟。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
