根本原因是isolation: isolate只创建新层叠上下文，不提升容器自身外部层级；移动端UI框架常隐式触发外层上下文，导致隔离块被“套娃”包裹，且容器若未设position和z-index或非块级元素，声明即被忽略。
为什么移动端 z-index 总是失效，加了 isolation: isolate 还被盖住？
根本原因不是 isolation: isolate 没起作用，而是它只创建新层叠上下文，不提升容器自身在外部的层级位置。移动端常见 UI 框架（如 Ionic、Vant、或自研滚动优化方案）会悄悄给根容器加 opacity: 0.99 或 transform: translateZ(0)，提前触发嵌套上下文——这时你再加 isolation: isolate，等于把隔离块“套娃”进一个更外层的结界里，子元素依然出不来。
- 必须确认目标容器是
display: block/flex/grid，且已设position: relative（或absolute/fixed），否则声明被浏览器静默忽略 - 检查祖先节点是否含
opacity、filter、will-change或transform—— Chrome DevTools 的 «Layers» 面板里，若该容器没显示为 “Stacking Context Root”，说明它被包进更外层上下文了 - iOS Safari 对
position: fixed元素自动创建上下文，所以弹窗类组件别直接用fixed套isolation: isolate，而应改用position: absolute+ 父容器position: relative
该加在哪个 DOM 节点上？不是弹窗，是它的直接父容器
isolation: isolate 必须加在目标交互元素的**直接父容器**上，不能隔层，也不能加在子元素本身。比如一个弹窗按钮嵌在 <div class="modal-footer"><button>确定</button></div> 里，就该加在 .modal-footer 上；如果结构是 <div class="wrapper"><div class="btn-group"><button></button></div></div>，那就要加在 .btn-group，而不是 .wrapper。
- 加在
button、span或其他display: inline元素上完全无效，浏览器直接跳过 - 别加在
<body>或全局 layout 容器上——这会让整个页面变成单一大上下文，反而加剧混合污染和层级混乱 - 在 Tiptap/Slate/Quill 编辑器中，找实际承载内容的 wrapper，如
div[data-slate-editor]或div.ql-editor，而不是外层.editor-container
Safari 和旧安卓 WebView 中 isolation 不生效怎么办？
Safari 15.4+ 支持原生 isolation: isolate，但 iOS 15.3 及更早、Safari 14 及更早版本必须加前缀；部分安卓 WebView（Android 6.x 及更早）根本不识别该属性，写了等于白写。
- 兼容写法必须严格按顺序：
-webkit-isolation: isolate写在isolation: isolate之前，否则 Safari 会忽略 - 旧安卓降级建议用
position: relative; z-index: 0替代，它兼容性更好，无 GPU 渲染副作用，但需确保父容器没opacity或transform - 绝对避免用
transform: translateZ(0)降级——旧设备易卡顿，文字发虚，配合overflow: hidden还可能裁切错位
mix-blend-mode 在移动端混错色，isolation: isolate 是边界不是开关
移动端 mix-blend-mode 混错，本质是混合范围穿透到了 <body> 背景或兄弟模块。比如一个 mix-blend-mode: screen 的浮层，不仅和正下方图片混合，还会继续向下跟导航栏、footer 甚至浅灰 background-color 计算颜色——这就是“背景污染”。isolation: isolate 不禁用混合，只划边界。
立即学习“前端免费学习笔记（深入）”；
- 必须加在混合区域的直接父容器上（如
.hero-blend-area），而非带mix-blend-mode的子元素 - 该容器得是块级或已定位元素，否则声明无效；若它本身要浮在其他模块之上（如 Modal 标题栏），还得额外加
position: relative和显式z-index - 加了之后，子元素的
mix-blend-modecomputed 值仍是multiply，但视觉无变化——这是预期行为：混合被限制在容器内部，不再跨区域计算
isolation: isolate 划完边界后，这个“边界”的物理位置，由它自身的 position 和 z-index 决定——不是加了就自动浮起，而是得先让它在外层堆叠顺序里站稳。 
