isolation: isolate仅创建层叠上下文边界，不提升自身层级；失效主因是容器未定位、非块级、被外层隐式上下文包裹、加错节点或safari/旧安卓兼容缺失。
isolation: isolate 不是用来做“布局兼容”的——它不控制尺寸、位置或流式行为，只创建层叠上下文。想靠它实现居中、对齐或响应式布局，方向就错了。
为什么加了 isolation 却没解决 z-index 失效？
根本原因在于：它不提升元素自身在外部的层级，只划定一个内部 z-index 计算范围。常见失效场景包括：
- 目标容器是
display: inline或position: static—— 浏览器直接忽略声明 - 祖先节点用了
opacity、transform、filter或will-change—— 提前创建了外层上下文，“套娃”后你的隔离块变成子级，z-index仍受限于外层 - 加在了隔层祖先上（比如弹窗结构里加在
.wrapper而非.modal-footer）—— 隔离范围错位，子元素压根不在该上下文中
Safari 和旧 Android WebView 的兼容写法
Safari 15.4+ 支持原生 isolation: isolate，但 iOS 15.3 及更早必须加前缀；Android 6.x 及更早的 WebView 完全不识别该属性，连 -webkit-isolation 都无效。
正确写法（顺序不能反）：
.blend-container {
-webkit-isolation: isolate;
isolation: isolate;
}
错误写法（后声明覆盖前缀，旧版 Safari 看不见）：
.blend-container {
isolation: isolate;
-webkit-isolation: isolate;
}
移动端弹窗/下拉菜单必须配合的三要素
仅加 isolation: isolate 不足以让组件浮出，还需同时满足：
- 容器设为
display: block/flex/grid（不能是默认inline） - 容器有
position: relative（或absolute/fixed），否则z-index无意义 - 容器自身需设
z-index（如z-index: 1000），否则整个隔离块在外部层级依然很低
特别注意：iOS Safari 对 position: fixed 元素自动创建层叠上下文，所以弹窗类组件建议改用 position: absolute + 父容器 position: relative，再加 isolation。
真正容易被忽略的是：它不是“万能 z-index 开关”，而是一道边界线——划得不准，或者外面已经有一堵墙，那这道线就毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
