[CSS]超详细解决方案：z-index的值很大却在下面?

🔎嘿，这里是慰慰👩🏻‍🎓，会发各种类型的博客，智能专业，从事前端🐾
🎉如果有帮助的话，就点个赞叭，让我开心一下！🙋🏻‍♀️ ✨也可以评论收藏私信⭐️
要是没有回呢，那我大概就在上班，学习，上课，摸鱼…

👀问题描述

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

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

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

🔎查阅发现

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

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

.one { 
   z-index: 10;  //红
} 

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

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

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

为什么会这样❓

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

<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 会将元素置于新的堆叠上下文中。
  不过这三条并不是我的问题，所以就不多加阐述啦
  希望可以帮到你呀！