遮罩层被抽屉内容盖住是因为未创建独立层叠上下文，需在共同直接父容器（如.bottom-sheet）上添加isolation: isolate及对应position和z-index，否则内部z-index仅在局部上下文中生效。
遮罩层被抽屉内容盖住，是因为没创建独立层叠上下文
加了 z-index: 1040 的遮罩层仍被 z-index: 1041 的面板压住，不是 z-index 写小了，而是它们根本不在同一个层叠上下文里。移动端常见框架（如 Ionic、Vant）或自定义 wrapper 上悄悄加了 transform: translateZ(0)、opacity: 0.99 或 filter: blur(0)，提前创建了父级上下文——导致遮罩和面板的 z-index 只在那个“套娃”里比大小，外部层级由父容器决定。
isolation: isolate 必须加在抽屉容器上，且容器得能参与层叠
它不能加在遮罩元素（.mask）或面板（.panel）上，浏览器会静默忽略。必须加在它们的**共同直接父容器**上，比如 .bottom-sheet，并确保该容器满足两个硬性条件：
-
display是block、flex或grid（不能是inline） -
position是relative、absolute或fixed（static无效）
示例正确写法：
.bottom-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
isolation: isolate;
-webkit-isolation: isolate;
}不加 position，isolation 就是摆设。
加了 isolation 还是被盖住？检查三件事
遮罩层依然不可点、颜色异常、或混合出错，大概率是以下任一情况：
- 祖先链上有
opacity: 0.99、transform: scale(1)、will-change: transform—— 它们把.bottom-sheet包进了更外层上下文，隔离失效 -
.bottom-sheet自身没设z-index，虽然内部 z-index 生效了，但它在外部仍处于 stacking level 0（最底层） - Safari 版本低于 15.4，漏写了
-webkit-isolation: isolate，且没放在标准声明前面
用 Chrome DevTools 打开 «Layers» 面板，选中 .bottom-sheet，确认它是否显示为 “Stacking Context Root”。如果不是，说明声明被忽略或被覆盖。
立即学习“前端免费学习笔记（深入）”；
mix-blend-mode 和 backdrop-filter 共存时遮罩发灰？isolation 是唯一解
如果遮罩用了 backdrop-filter: blur(8px)，同时抽屉里有文字用了 mix-blend-mode: screen，不加隔离会导致颜色计算跨上下文污染——iOS Safari 尤其明显，遮罩边缘泛紫或发灰。此时 isolation: isolate 不是可选项，是必需项：
- 它让
.bottom-sheet成为混合与滤镜的计算终点，.mask和.panel只彼此影响，不再和 body 背景、导航栏、甚至系统状态栏混合 - 别试图用
opacity模拟遮罩，那会触发新上下文，反而加剧污染；用background: rgba(0,0,0,0.5)+isolation更干净 - 旧项目若已大量使用
transform: translateZ(0)升层，直接替换成isolation: isolate：零字体发虚、零滚动卡顿、不强制 GPU 合成
真正容易被忽略的是：isolation 划的是一道边界，但这条边界自己得先站稳——它自身的 position 和 z-index 决定了整块隔离区域在页面中的“地基高度”，不是加了就自动浮起来。
