👀问题描述

上班碰到的一个问题
badge显示在了drawer上
就是下面这个尴尬样子🤷🏻‍♀️
badge显示在drawer上

但按道理这里使用的是antd
antd里drawer的z-index默认为1000，而badge的z-index为10，为何1000的反而在下面？

1
2
z-index: 10; // badge
z-index: 1000; // drawer

🔎查阅发现

❗由于父级的 z-index 影响，该元素处于较低的堆叠上下文中❗

看一个示例：
在页面上放四个方块🟥🟨🟩🟦
设置不同的z-index

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.one { 
   z-index: 10;  //红
} 

.two{ 
   z-index: 100;  //绿
} 

.three { 
   z-index: 9999;  //蓝
}
.four { 
   z-index: 50;  //紫
}

如果单看z-index数值，3应该在最上面，然后事实上并不是

z-index
为什么会这样❓

堆叠上下文的一个影响方面是子元素仅限于其父元素的堆叠上下文

1
2
3
4
5
6
<div class="one">
    z-index: 10
    <div class="two">z-index: 100 </div>
    <div class="three">z-index: 9999 </div>
</div>
<div class="four">z-index: 50 </div>

查看代码，我们可以看到1和4是同级的。也就是说，它们存在于同一级别（这与 z-index 级别不同）。2和3是1的子元素。

所以他们的z-index只在其父内容元素内部有效果。例如，如果有其他子元素，它们的z-index值会将它们放在彼此之上或之下。

但是z-index这些子元素的值并不意味着父元素之外的任何东西，因为父内容元素的z-index设置为 1。

所以它的孩子不能突破那个z-index层次。

（一个孩子会被父母限制，无法摆脱他们。）

至此 大概明白了问题所在
接下来是解决方法

✨解决方法：

解决方案：

  1. 将模式移到内容父级之外，并进入页面的主要堆叠上下文
  2. 删除position，因此它不会限制模态的 z-index
  3. 修改z-index

当然，还有可能是

  • 同一堆叠上下文中的元素按出现顺序显示，后元素在前元素之上。
  • 元素没有设置position
  • 设置 CSS 属性，如 opacity 或 transform 会将元素置于新的堆叠上下文中。