isolation: isolate只创建独立层叠上下文，不提升层级；必须加在目标元素的直接父容器上，且该容器需为块级或已定位元素并显式设置position和z-index才生效。
加 isolation: isolate 不等于“元素就浮上来了”，它只划边界，不提高度；真正起效必须满足三个硬条件：加在**直接父容器**上、该容器是**块级或已定位元素**、且自身有 position 和 z-index。
为什么直接给按钮加 isolation: isolate 没用？
因为 isolation 只对容器型元素生效，且必须是目标元素的**直接父级**。浏览器会忽略加在 <button></button>、<span></span> 或其他 inline 元素上的声明。
- 错误写法：
.btn { isolation: isolate; }→ 浏览器静默忽略 - 正确结构：若按钮 HTML 是
<div class="nav-actions"><button>提交</button></div>，则样式应写在.nav-actions上 - 如果结构是
<div class="wrapper"><div class="actions"><button></button></div></div>，隔离必须加在.actions，不是.wrapper
加了 isolation: isolate 但 z-index 还是无效？
因为 isolation: isolate 只创建新层叠上下文，不赋予该容器外部层级。子元素的 z-index 再高，也出不了这个“盒子”——除非盒子自己先在外部世界站稳位置。
- 必须同时设置
position: relative（或absolute/fixed）和明确的z-index（如z-index: 100） - 常见失效原因：
.modal-header加了isolation: isolate，但自身是position: static，导致整个容器卡在 stacking level 0 - 验证方法：Chrome DevTools → Layers 面板中，该节点是否显示为 “Stacking Context Root”
和 opacity/transform 创建上下文的区别在哪？
老办法如 opacity: 0.99 或 transform: translateZ(0) 虽能触发上下文，但副作用明显；isolation: isolate 是纯语义控制，无视觉扰动、无性能代价。
-
opacity: 0.99：子元素继承透明度，可能影响可访问性，文字渲染也可能模糊 -
transform: translateZ(0)：强制 GPU 合成，在 Safari 中易与will-change冲突，滚动时字体发虚 -
isolation: isolate：零视觉变化、零重排重绘、DevTools 中清晰标记为上下文根节点 - 注意兼容性：Safari 15.4+ 支持原生，iOS 15.3 及更早需加
-webkit-isolation: isolate
真正容易被忽略的是：你得同时管好两层 z-index——容器自身的外部层级，和它内部子元素的相对顺序。漏掉其中一层，隔离就只是画了个圈，没实际作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
