为什么 z-index 总是不起作用🤯？

如果您曾经挣扎过，那么z-index您并不孤单。

请看下面的代码片段：

圆圈div带有z-index，但它仍然显示在带有99999的标题下方。为什么会这样？它应该位于顶部，因为它的 最高？z-index2circlez-index

z-index并非简单地将元素放置在较低元素之上z-index，或者根本不放置z-index元素。这其中有其逻辑。如果你理解了这个逻辑，那么下次添加 z-index 属性时，你就会知道应该把它放在哪里以及为什么。

让我们深入研究一下：

z-index基于 HTML 元素的堆叠上下文。堆叠上下文简单来说就是元素在 HTML 树中的堆叠方式，无论这些元素是否处于相同的堆叠上下文中。例如，在上方的代码片段中，header和 的堆叠上下文main与 不同circle。只要我们为元素添加 z-index 属性，就可以创建新的堆叠上下文。

还有许多其他创建堆叠上下文的方法。如果你想深入了解，可以在这里阅读。

如果我们为 header 元素添加 z-index，它将创建一个新的堆叠上下文，与main和进行比较header。圆形元素的 z-index 将不起作用，因为它在main元素上下文中拥有自己的堆叠上下文。但是，如果我们在圆形元素上创建 z-index，div则上下文将位于其兄弟元素（如果有）之间。

为了解决这个问题，我们需要做的就是从主元素中移除 z-index，这将移除新的堆叠上下文。现在，就header堆叠circle上下文而言，它就变得简单了。

相关链接：
堆叠上下文
不使用 z-index 的堆叠

希望你喜欢这篇文章。关注我，了解更多 CSS 技巧和窍门。

阿斯拉姆·沙阿跟随

https://codedmails.com 的创建者