isolation: isolate能“救”z-index失效，因其强制父容器创建独立层叠上下文，使子元素z-index仅在内部比较，避免与外部元素混战；须作用于直接父容器，且父自身需有足够外部层级。
isolation: isolate 为什么能“救” z-index 失效
它不改变 z-index 的值，也不提升元素本身层级，而是让目标元素的父容器变成一个独立的堆叠上下文（stacking context）边界。这样一来，子元素的 z-index 就只在该容器内部比大小，不再和页面其他区域的元素“混战”。常见失效场景如轮播按钮点不动、弹窗表单被 iframe 盖住，问题根源往往不是 z-index 设小了，而是子元素压根没机会参与外部层叠排序。
必须加在父容器上，而不是目标元素自己
isolation: isolate 必须作用于目标交互元素的**直接父容器**，否则无效。比如按钮 .btn 点不了，不能给 .btn 加 isolation: isolate，而要给它外层那个 .modal-controls 或 .carousel-nav 加。
- 加在子元素上：浏览器忽略，
isolation对非容器型元素无意义 - 加在隔了两层的祖先上：可能创建了上下文，但把不该隔离的内容也卷进去了，反而加剧混乱
- 正确写法：
.control-wrapper { isolation: isolate; }，然后.btn只需position: relative; z-index: 10;
它和 transform: translateZ(0) 的关键区别
老办法用 transform: translateZ(0) 强制升层，副作用明显；isolation: isolate 是纯层叠语义控制，零视觉扰动。
-
transform: translateZ(0)会触发 GPU 合成，可能导致字体发虚、滚动卡顿，Safari 中还可能干扰will-change -
isolation: isolate不影响重排重绘，不改变布局流，不触发硬件加速 - 兼容性已足够：Chrome 52+、Firefox 50+、Safari 15.4+（iOS 15.4+）、Edge 79+；IE 完全不支持，需单独降级
加了 isolation: isolate 还不管用？先查这三点
常见假阳性：父容器加了 isolation: isolate，子元素也写了 position: relative 和 z-index: 999，但依然被盖住。
- 父容器自己有没有
z-index值？isolation: isolate创建上下文，但不赋予高度；若父在外部上下文中是z-index: 1，整个隔离块就卡在第 1 层 - 父容器或祖先是否设置了
pointer-events: none、visibility: hidden或opacity: 0.99？这些会静默阻断交互，且不报错 - 子元素是否真的定位了？
z-index对position: static无效，哪怕写了z-index: 999也会被 DevTools 标为 “(not applicable)”
最易被忽略的一点：隔离解决的是“内部排序”，不是“全局拔高”。父容器在外部世界里的层级，仍由它自己的定位状态和 z-index 决定——这个外部位置，才是它能不能“露头”的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
