加了isolation: isolate仍被盖住，是因为它仅创建新层叠上下文而不提升容器自身层级；必须同时设置position（如relative）和显式z-index（如100），否则容器在父上下文中仍处于第0层，内部高z-index无效。
为什么加了 isolation: isolate 还是被盖住？
根本不是属性没生效，而是它只划边界、不抬高度。浏览器按规范执行：isolation: isolate 仅创建新层叠上下文，但容器自身在父级上下文里的层级，仍由它的 position 和 z-index 决定。如果容器是 position: static 或 z-index: auto，它默认卡在父级上下文的第 0 层——内部再高的 z-index 也出不去。
验证方式：打开 Chrome DevTools → «Layers» 面板 → 找到该节点。若未标为 “Stacking Context Root”，说明声明被静默忽略。
- 最常见原因：容器
display不是block/flex/grid，或position仍是static - 动态插入的 DOM（如 JS 创建的弹窗 wrapper）极易漏掉
position，必须显式设置 - 别加在
button、span等display: inline元素上——浏览器直接跳过
isolation: isolate 应该加在哪个 DOM 节点上？
必须加在目标交互区域的「直接父容器」上，不能隔层，也不能加在子元素或 body 上。
例如弹窗按钮结构是 <div class="modal-footer"><button>确定</button></div>，就要加在 .modal-footer 上，而不是 button 或外层 .modal。
- 错误写法：
.modal-content { isolation: isolate; }（如果按钮实际父级是.modal-footer，这就隔了一层） - 正确结构示例：
<div class="dropdown-wrapper"><div class="dropdown-menu">...</div></div>→isolation: isolate加在.dropdown-wrapper - 在 Tiptap/Slate/Quill 中，找真正承载内容的 wrapper，如
div[data-slate-editor]或div.ql-editor，而非外层.editor-container
移动端真机调试最常踩的坑
iOS Safari 对层叠上下文极其敏感，尤其 ≤ 16.6 版本，会为 transform、fixed 元素自动建上下文，且不警告。
- 检查祖先节点是否含
opacity、filter、will-change或transform（哪怕只是translateZ(0)）——这些会提前创建嵌套上下文，把你的隔离块“套娃”包进去 -
position: fixed元素在 iOS Safari 中自动创建上下文，所以弹窗类组件别直接用fixed套isolation: isolate，而应改用position: absolute+ 父容器position: relative - 兼容旧版 Safari（iOS 15.3 及更早）需补前缀：
-webkit-isolation: isolate，且必须前置；写成isolation: on或isolation: true浏览器直接无视
如何配合 position 和 z-index 才算完整生效？
isolation: isolate 不是独立开关，而是一个协作型声明。单独加它只完成一半工作。
- 容器必须满足：至少是
display: block/flex/grid，或带position: relative/absolute/fixed - 必须显式设置
z-index（哪怕只是z-index: 1），否则它在外部层叠顺序中默认为 0 层 - 临时加
position: relative; z-index: 100，立刻验证是否恢复层级优先级 - 数值不用特别大，只要比遮挡它的兄弟元素高即可；避免全局滥用超大值（如
z-index: 9999）引发后续维护混乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
