isolation: isolate 是用于主动创建独立层叠（及混合）上下文的边界标记，仅对已定位的块级容器生效，不提升自身层级，须配合 position 和结构设计才能隔离内部层级或混合行为。
直接说结论：在 HTML 编辑器这类富文本容器中，isolation: isolate 不是用来“防止干扰”的万能开关，而是用来主动划定一个独立的层叠（和混合）边界——它只在你明确需要隔离内部组件层级或混合行为时才生效，且必须配合 position 和结构设计，否则毫无作用。
为什么编辑器里 z-index 失效？根源是隐式层叠上下文
HTML 编辑器（如 Quill、Tiptap、Slate 封装的容器）常对编辑区域加 transform: translateZ(0) 或 opacity: 0.99 来启用硬件加速或修复光标渲染，这些属性会静默创建父级层叠上下文。结果就是：你在编辑器内插入的 Tooltip、浮动工具栏、代码块高亮层，哪怕设了 z-index: 9999，也永远出不了这个“结界”。
此时不是 z-index 不够大，而是计算范围被锁死了。
常见错误现象：
- 悬浮菜单总被编辑器背景盖住
- 自定义代码块的语法高亮层被编辑器滚动容器裁切
- 拖拽中的临时 placeholder 元素突然消失或错位
给谁加 isolation: isolate？不是弹窗，是它的直接容器
别把 isolation: isolate 加在弹窗、Tooltip 或高亮元素本身上——它只对块级容器元素生效，且必须是这些组件的最近共同父容器（通常是编辑器内容区 wrapper）。
正确做法：
- 找到编辑器实际渲染内容的最外层 DOM 节点（比如
div class="ql-editor"或div[data-slate-editor]） - 给它加
position: relative（否则z-index无效） - 再加
isolation: isolate（注意：不是isolation: on或isolation: true） - 如果该容器本身需浮在编辑器 UI 之上（如全屏模式下的工具栏），额外设
z-index: 100
示例：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.ql-editor {
position: relative;
isolation: isolate;
z-index: 50; /* 让整个编辑区成为可被外部覆盖的“一层”，但内部自由 */
}
mix-blend-mode 混合污染？isolation 是边界，不是开关
编辑器里做语法高亮、行号背景叠加、或实时 Markdown 预览时，若用了 mix-blend-mode，你会发现蓝色关键字和编辑器灰色背景混出奇怪紫色——这不是 bug，是默认混合上下文跨了整页。
isolation: isolate 在这里的作用很具体：
- 它不改变
mix-blend-mode的值，也不禁用混合 - 它让容器自身成为混合边界：子元素只跟容器内其他兄弟混合，不再和
body、导航栏、侧边栏背景混合 - 必须确保容器不是
display: inline；Safari 14 及更早需补-webkit-isolation: isolate
典型写法：
.markdown-preview {
display: block;
position: relative;
isolation: isolate;
-webkit-isolation: isolate;
}
容易被忽略的关键点：它不提升层级，只定义范围
加了 isolation: isolate 后，子元素仍可能被盖住——因为这个属性从不提高容器自身的堆叠等级。它只是说：“我内部的 z-index 彼此之间可以自由比大小，但我和外面怎么排，还得看我自己的 position 和 z-index”。
所以真正复杂的地方在于：你需要同时控制两层关系——
- 容器对外的层级（靠它自己的
position+z-index） - 容器对内的自治（靠
isolation: isolate+ 子元素z-index）
漏掉任何一层，都会让隔离失效。DevTools 的 «Layers» 面板是唯一能确认它是否真正起效的手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
