isolation: isolate必须作用于目标元素的直接父容器且该容器需有position和z-index才能生效，否则仅划边界不抬高度；加在非容器元素或隔层祖先上无效，safari 15.4前需加-webkit前缀。
直接加 isolation: isolate 不一定生效，关键得看加在谁身上、有没有配套条件。
必须作用于目标元素的直接父容器
很多人给按钮或弹窗内容本身加 isolation: isolate，结果没用——浏览器会忽略它，因为该属性只对**容器型元素**有效，且必须是目标交互元素的**直接父级**。
- 错误写法：
.modal-content { isolation: isolate; }（如果按钮在.modal-content里，但它的父级其实是.modal-footer，那这里就隔了一层） - 正确写法：
.modal-controls { isolation: isolate; }，前提是按钮的 HTML 直接嵌在.modal-controls内，没有中间 wrapper - 若结构是
<div class="wrapper"><div class="btn-group"><button></button></div></div>，则isolation: isolate应加在.btn-group上，不是.wrapper
父容器必须有 position 和 z-index 才能“露头”
isolation: isolate 只划边界，不抬高度。它让子元素的 z-index 在内部比大小，但整个容器在外部的层级，仍由它自己的 position 和 z-index 决定。
- 常见失效：加了
isolation: isolate，子按钮也写了position: relative; z-index: 999，但还是点不动 - 大概率原因：
.modal-controls自身是position: static或没设z-index，导致它在外部默认处于层叠顺序底层（stacking level 0） - 解决方式：给容器加
position: relative; z-index: 100;（数值只要比遮挡它的兄弟元素高即可）
别和 opacity/transform 混用，否则可能白加
如果父容器或更上层已经用了 opacity: 0.99、transform: scale(1)、filter: blur(0) 或 will-change: transform，它们会提前创建层叠上下文——这时再加 isolation: isolate，要么被覆盖，要么把不该隔离的内容也卷进去。
- 典型冲突场景：轮播图容器用了
transform: translateX(0)，你在其子菜单上加isolation: isolate，但菜单仍被盖住 - 检查方法：Chrome DevTools → Elements → 选中容器 → 右侧 Styles 面板搜 “stacking context”，或切换到 Layers 面板确认是否真成了新上下文根节点
- 稳妥做法：删掉上层隐式触发上下文的属性；若不能删，就把
isolation: isolate加在更外一层、尚未被污染的容器上
兼容性和写法细节不能漏
Safari 15.4+、Chrome 52+、Firefox 50+、Edge 79+ 原生支持；Safari 14 及更早需加前缀，IE 完全不支持。
- 安全写法：
.control-wrapper { -webkit-isolation: isolate; isolation: isolate; } - 注意：
isolation: auto是默认值，不创建上下文；不存在isolation: on或其他变体 - 不能用于
display: inline元素，确保容器是block、flex、grid或已定位元素
真正容易被忽略的，是那个“父容器自己得先有层级”——isolation: isolate 解决的是内部排序问题，不是外部抬升问题。很多调试卡在最后一步，就是忘了给容器本身设 z-index。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
