isolation: isolate 仅强制创建新堆叠上下文，不自动赋予z-index层级优势；需配合position和显式z-index才能生效，且受祖先堆叠上下文约束。
isolation属性本身不创建z-index层级
isolation 的作用是强制创建一个新的**堆叠上下文（stacking context）**，但它不会“创建 z-index 层级”——z-index 本身只在已存在的堆叠上下文中起作用。如果你没给元素设 z-index，哪怕加了 isolation: isolate，它也不会自动获得层级优势。
常见误解是：加了 isolation: isolate 就能“独立盖住其他内容”，其实它只是让该元素及其子树脱离父级堆叠上下文的影响，是否能盖住别人，还得看它自身的 z-index 值、层叠顺序规则，以及祖先是否也建立了堆叠上下文。
什么时候必须用isolation: isolate配合z-index？
典型场景是：你想让某个组件（比如弹窗、Tooltip）不受外层 transform 或 opacity 等触发堆叠上下文的属性干扰。例如，父容器用了 transform: translateZ(0)，导致其内部所有子元素都困在它的堆叠上下文中，此时即使你给弹窗设了 z-index: 9999，它也盖不住同级但位于更高堆叠上下文中的兄弟元素。
- 给弹窗容器加
isolation: isolate，让它自己成为新堆叠上下文的根 - 同时设置
position: relative（或absolute/fixed）和z-index - 确保它没有被更外层的
z-index更高的祖先“框死”（即祖先没设z-index或设为auto）
isolation与z-index配合失效的常见原因
加了 isolation: isolate 还盖不住别的元素？大概率是以下情况之一：
立即学习“前端免费学习笔记（深入）”；
- 目标元素没设
position（z-index对static元素无效） - 父级容器有
z-index且值大于你的元素（比如父级z-index: 100，你设z-index: 99，再 isolate 也没用） - 浏览器兼容性问题：
isolation在 IE 完全不支持，旧版 Safari（≤9）也不支持 - 用了
will-change: transform或opacity: 0.99等隐式触发堆叠上下文的属性，却没意识到它们会“截断”你的层级穿透
一个最小可验证示例
.modal {
isolation: isolate;
position: fixed;
top: 50%;
left: 50%;
z-index: 1000; /* 必须显式设置 */
}注意：如果这个 .modal 被包裹在一个 div 里，而该 div 设了 z-index: 1 且 position: relative，那 .modal 的 z-index: 1000 是相对于那个 div 的堆叠上下文的——它依然可能被同级另一个 z-index: 2 的兄弟容器盖住。真正决定谁在上面的，永远是**最近的共同堆叠上下文根节点下的相对层级**。
复杂点在于：堆叠上下文可以嵌套多层，而 isolation 只解决“是否新建一层”的问题，不解决“这层有多高”的问题。容易被忽略的是，你得同时检查至少三层：当前元素的定位与z-index、其直接堆叠上下文根的z-index、以及该根在上一级上下文中的层叠位置。
