关于z-index层级设为999还不生效那点事

- 今天遇到一个难题:

底部A区为fixed定位,其他区域为relative定位;现在有个需求其他区域中的一个弹窗需要覆盖在底部A区之上,但是由于两部分都是根据页面窗口定位,父级层级相同,底部z-index越大底部就会遮挡其他区域中的吸底弹窗;如果想达到预期效果,这道题该怎么解呢?

- 问题出现的原因:

1. 所有的fixed定位依赖于父级的z-index,并不是z-index越大层级就越高;
2. 父级盒子的z-index区域其更上父级的z-index,简单来说就说取决于最外层父级的z-index,最外层z-index为2,子级设置z-index再高也是无效的,同级z-index只能和同级z-index相互影响
3. 那么重点来了,在写z-index之前一定要想清楚父级z-index,存在哪个盒子则影响该盒子的同级z-index
4. 层叠上下文参考文档: developer.mozilla.org/zh-CN/docs/…

- 所以解决方案来了(若有更好的解决方案大家也可以提,我是菜鸟~~):

<div class="body">
    <div class="boxA">
        盒子A与盒子B同级
        <div class="boxC">盒子C中有个弹窗需要吸底且出现在盒子B之上且为fixed定位</div>
    </div>
    <div class="boxB">盒子B吸底且为fixed定位</div>
</div>

.body{
    .boxA{
        position: relative;
        z-index: 3; // 层级一定要大于底部层级,boxC的弹窗才能展示在boxB之上
        width: 100%;
        height: calc(100vh - 2.9rem); // 为了使两个盒子独立切不会重叠,底部的气泡就不会被遮挡了
    }
    .boxB{
        position: fixed;
        z-index: 2;
        width: 100%;
        height: 2.9rem;
    }
}