isolation: isolate 在 safari 15.4 前不生效，需加 -webkit-isolation 前缀且置于标准属性之前；仅对已定位块级容器有效，须配合 position 和 z-index 才能真正提升层级。
isolation: isolate 在 Safari 15.4 之前完全不生效
加了 isolation: isolate 却没反应，不是写错了，大概率是 Safari 版本太低。Safari 15.4（对应 iOS 15.4）才开始原生支持该属性；更早版本（包括 Safari 14、iOS 15.3 及以下）会直接忽略它，连警告都不报。
必须补前缀且顺序不能错：-webkit-isolation: isolate 要写在 isolation: isolate 之前，否则 Safari 15.4+ 会优先读取后声明而跳过前缀，旧版又根本看不到声明——两边都失效。
- 正确写法：
.modal-controls { -webkit-isolation: isolate; isolation: isolate; } - 错误写法：
isolation: isolate; -webkit-isolation: isolate;—— 旧版 Safari 看不见，新版 Safari 忽略前缀 - Android WebView 更差：Android 6.x 及更早的系统 WebView 完全不识别该属性，连前缀都不认
容器没定位，isolation: isolate 等于白写
isolation: isolate 只创建层叠上下文，不提升容器自身在外部的层级位置。如果容器是 position: static、没设 z-index，它在父级中默认处于第 0 层——内部再高的 z-index 也出不去。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须同时设置
position: relative（或absolute/fixed）和显式z-index（如z-index: 100） - 常见错误：
.dropdown-menu { isolation: isolate; }—— 没position，声明被静默忽略 - 检查方式：Chrome DevTools 的 «Layers» 面板里看该节点是否标为 “Stacking Context Root”；Safari 中可在 Elements → Computed 搜索
stacking context
外层 opacity/transform 把隔离块“套娃”进去了
父容器用了 opacity: 0.99、transform: translateZ(0) 或 filter: blur(0)，就会提前创建一个层叠上下文——你的 isolation: isolate 容器会被包进这个“套娃”里，变成子上下文，内部 z-index 仍只跟外层比，而非真正独立。
- 此时
isolation: isolate没失效，但它划的边界被外层吞掉了 - 优先删掉外层隐式触发属性；若无法删（比如第三方轮播库强制加了
transform），就把isolation: isolate往上提一层，加在尚未被污染的最近合法容器上 - iOS Safari 对
position: fixed元素自动创建上下文，弹窗类组件别直接用fixed套isolation: isolate，应改用position: absolute+ 父容器position: relative
加在了错误的 DOM 节点上
isolation: isolate 对 display: inline 或 position: static 元素无效，只作用于块级容器或已定位元素。而且它必须加在目标组件的「直接父容器」上，不能隔层，也不能加在子元素本身。
- 结构是
<div class="wrapper"><div class="btn-group"><button></button></div></div>，就要加在.btn-group上，.wrapper加了没用 - 别加在
<button></button>、<span></span>这类默认 inline 元素上，哪怕你写了display: block，也得确认 computed 样式已生效 - 别加在
或全局 layout 容器上——这会让整个页面变成单一大上下文，反而加剧混合污染和层级混乱 - 在 Tiptap/Slate/Quill 编辑器中，找实际承载内容的 wrapper，如
div[data-slate-editor]或div.ql-editor，而不是外层.editor-container
isolation: isolate 不是开关，它只划界；划完界之后，容器自己能不能“露头”，还得靠 position 和 z-index 配合——这两者漏一个，整套就卡在底层不动。**前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
