isolation: isolate仅创建新层叠上下文，不提升容器自身层级；必须同时设置position和z-index才能使子元素“浮出”，否则容器仍处于父上下文第0层。
isolation: isolate 本身不解决 z-index 穿透问题，它只创建新层叠上下文；要让子元素真正“浮出来”，必须同时给容器设 position 和 z-index，否则隔离块自己就卡在底层。
为什么加了 isolation: isolate 还被盖住？
根本不是属性没生效，而是浏览器按规范执行：该声明只划出一个独立的层叠计算范围，但容器自身在父级上下文里的层级仍由它的 position 和 z-index 决定。如果容器是 position: static 或 z-index: auto，它默认处于父级上下文的第 0 层——内部再高的 z-index 也出不去。
- 用 Chrome DevTools 的 «Layers» 面板确认该节点是否显示为 “Stacking Context Root”；如果不是，说明
isolation: isolate被静默忽略（大概率是display或position不合规） - 临时加
position: relative+z-index: 100，立刻验证是否恢复层级优先级 - 动态插入的容器（如 JS 创建的弹窗 wrapper）极易漏掉
position，必须显式设置
该加在哪个 DOM 节点上才有效？
加在目标交互区域的「直接父容器」上，不能隔层，也不能加在子元素或 body 上。
- 例如弹窗按钮结构是
<div class="modal-footer"><button>确定</button></div>，就要加在.modal-footer上，而不是button或外层.modal - 加在
button、span等display: inline元素上完全无效，浏览器跳过声明 - 别加在
body或全局 layout 容器上——这会让整个页面变成单一大上下文，反而加剧混合污染和层级混乱 - 在 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)）——这些会提前创建嵌套上下文，把你的隔离块“套娃”包进去 - iOS Safari 对
position: fixed元素自动创建上下文，所以弹窗类组件别直接用fixed套isolation: isolate，而应改用position: absolute+ 父容器position: relative - 兼容性处理：Safari 15.4+ 支持原生
isolation: isolate，但 iOS 15.3 及更早需补前缀-webkit-isolation: isolate，且必须前置 - 永远别写成
isolation: on或isolation: true—— 浏览器直接无视
真正难的不是加对属性，而是判断哪一层祖先已经悄悄建了上下文；DevTools 的 «Layers» 面板里看不到 “Stacking Context Root”，往往意味着你正在往一个已存在的玻璃盒子里再套盒子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
