isolation: isolate必须加在目标元素的直接父容器上，且该容器需为块级或已定位元素；仅划边界不抬高度，故还需配合position和z-index才能生效，否则仍处于层叠底层。
isolation: isolate 加在谁身上才有效？
加在目标元素的直接父容器上，且该容器必须是块级或已定位元素。比如弹窗按钮被盖住，不能给 button 加 isolation: isolate，也不能给隔了两层的 .layout-wrapper 加——得找它最近的、包裹它的那个 div，比如 .modal-footer 或 .toolbar-group。
常见失效写法：.tooltip-content { isolation: isolate; }（如果 tooltip 的 DOM 结构是 <div class="tooltip"><div class="tooltip-content"><span>xxx</span></div></div>，那真正该加的是 .tooltip）
-
isolation: isolate对display: inline元素无效 - 对
position: static且无其他定位属性的元素，声明会被浏览器忽略 - 加在
或全局 layout 根节点上，等于放弃整个页面的层叠流控制
为什么加了 isolation 还是被遮挡？
isolation: isolate 只划边界，不抬高度。它让子元素的 z-index 在内部比大小，但容器自己在外部仍处于默认层叠层级（stacking level 0），也就是最底层。
典型现象：子元素写了 z-index: 999，父容器也加了 isolation: isolate，但按钮还是点不动。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须给容器同时加
position: relative（或其他定位值）和显式z-index（如z-index: 100） - 数值不用特别大，只要比遮挡它的兄弟容器高即可
- 用 Chrome DevTools 的 «Layers» 面板确认该节点是否显示为 “Stacking Context Root”
哪些属性会悄悄破坏 isolation 效果？
如果父级或更外层已有 opacity: 0.99、transform: scale(1)、filter: blur(0) 或 will-change: transform，它们会提前创建层叠上下文，把你的 isolation: isolate 容器包进去——结果是边界没划成，反而扩大了混合或层级影响范围。
- 检查祖先链上是否有这些隐式触发属性（尤其 UI 框架封装的 wrapper）
- 移动端和 Safari 中更敏感：iOS Safari 对
position: fixed元素自动建上下文 - 稳妥做法：删掉冲突属性；若不能删，就把
isolation: isolate上移到尚未被污染的最近合法容器上
Safari 兼容性和常见拼写错误
Safari 15.4+ 支持原生 isolation: isolate，但 iOS 15.3 及更早版本必须加前缀。
- 正确写法：
-webkit-isolation: isolate; isolation: isolate; - 错误写法：
isolation: on、isolation: true、isolation: auto（这是默认值，不创建新上下文） -
isolation是 CSS 属性名，不是 class 名，别写成class="isolate"
真正容易被忽略的是：它不提升层级，只定义范围。你得同时管好“容器自己在哪一层”和“容器里面谁在上面”，这两层 z-index 是解耦的——漏掉任何一层，隔离就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
