z-index css_Z-Index说明：如何使用CSS堆叠元素

阅读量：2527 次

发布时间：2019-05-11

本文共 5500 字，大约阅读时间需要 18 分钟。

z-index css

by Veronika Ivhed

由Veronika Ivhed

Z-Index说明：如何使用CSS堆叠元素 (Z-Index Explained: How to Stack Elements Using CSS)

I have always struggled with the CSS property . It sounds so easy at first. Elements with a higher z-index value are displayed in front of those with a lower z-index value. Still, a lot of times I have ended up in situations where it seems like the z-index value didn’t have any effect at all.

我一直为CSS属性苦苦挣扎。一开始听起来很简单。 z索引值较高的元素显示在z索引值较低的元素之前。不过，很多时候我最终还是遇到z-index值根本没有任何作用的情况。

I decided that I’d had enough of trial and error with z-index and that I wanted to get a better understanding. I hope this article can help you so you will never wonder why z-index is not doing what you expect it to do.

我决定对z-index进行足够的反复试验，并希望得到更好的理解。希望本文能对您有所帮助，所以您将永远不会奇怪为什么z-index没有按照您的预期去做。

默认堆叠顺序 (Default stacking order)

Let’s first mention the default order the browser stacks elements in, when no z-index is applied:

首先，当没有应用z-index时，浏览器按照默认顺序堆叠元素：

Root element (the <html> element)
根元素(<html>元素)

Non-positioned elements in the order they are defined
未定位元素的定义顺序

Positioned elements in the order they are defined
按定义顺序放置元素

A element is an element with the default position value static. A element is an element with any other position value. Examples of other values are: absolute, relative, sticky or fixed.

元素是默认位置值为静态的元素。元素是具有任何其他位置值的元素。其他值的示例是：绝对值，相对值，粘性值或固定值。

HTML:

HTML：

CSS:

CSS：

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */

.blue, .pink, .orange {  position: absolute;}

We defined the green box last in the document. Still, it appears behind the others because it is non-positioned.

我们在文档的最后定义了绿色框。但是，由于未定位，它仍显示在其他后面。

与z-index堆叠 (Stacking with z-index)

If we now want to change the stacking order of these elements, we can use the property z-index. An element with a higher z-index will be displayed in front of an element with a lower z-index. One thing to note is that z-index only works with positioned elements.

如果现在要更改这些元素的堆叠顺序，则可以使用属性z-index。 Z索引较高的元素将显示在Z索引较低的元素之前。要注意的一件事是z-index 仅适用于定位的元素 。

.blue, .pink, .orange {  position: absolute;}

.blue {  z-index: 2;}

.orange {  z-index: 3;}

.green {  z-index: 100; // has no effect since the green box is non-         positioned}

The orange box with a higher z-index is displayed in front of the blue box.

z索引较高的橙色框显示在蓝色框的前面。

堆叠上下文 (Stacking Context)

Let’s say that we add another positioned box to the layout which we want to position behind the pink box. We update our code to the following:

假设我们在布局中添加了另一个要放置在粉红色框后面的框。我们将代码更新为以下内容：

HTML:

HTML：

CSS:

CSS：

.blue, .pink, .orange, .purple {  position: absolute;}

.purple {  z-index: 0;}

.pink {  z-index: 1;}

.blue {  z-index: 2;}

.orange {  z-index: 3;}

.green {  z-index: 100;}

Our pink box is displayed in front of the purple box as expected, but what happened to the orange box? Why is it all of a sudden behind the blue one even though it has a higher z-index? This is because adding a z-index value to an element forms what is called a .

我们的粉红色框按预期显示在紫色框的前面，但是橙色框发生了什么？为什么z-index值较高，为什么突然落后于蓝色的？这是因为将z-index值添加到元素会形成所谓的。

The pink box has a z-index value other than auto, which forms a new stacking context. The fact that it forms a stacking context affects how its child elements are being displayed.

粉色框具有除auto以外的z索引值，这形成了新的堆叠上下文。它形成堆叠上下文的事实会影响其子元素的显示方式。

It is possible to change the stacking order of the pink box child elements. However, their z-index only has a meaning within that stacking context. This means that, we won’t be able to move the orange box in front of the blue box, because they are not within the same stacking context anymore.

可以更改粉红色框子元素的堆叠顺序。但是，它们的z-index仅在该堆叠上下文中具有含义 。这意味着，我们将无法将橙色框移到蓝色框的前面，因为它们不再位于同一堆叠上下文中。

If we want the blue box and the orange box to be part of the same stacking context, we can define the blue box as a child element of the pink box. This will make the blue box appear behind the orange one.

如果我们希望蓝色框和橙色框成为同一堆叠上下文的一部分，则可以将蓝色框定义为粉红色框的子元素。这将使蓝色框出现在橙色框的后面。

Stacking contexts are not only formed when applying z-index to an element. There are that cause elements to form stacking contexts. Some examples are: filter, opacity, and transform.

堆叠上下文不仅在将z-index应用于元素时形成。还有会导致元素形成堆栈上下文。一些示例是：过滤器，不透明度和变换。

Let’s go back to our previous example. The blue box is again a sibling to the pink box. This time, instead of adding z-index to the pink box, we apply a to it.

让我们回到前面的示例。蓝色框再次成为粉红色框的同级。这次，我们没有在粉红色的框中添加z-index，而是对其应用了。

HTML:

HTML：

CSS:

CSS：

.blue, .pink, .orange {  position: absolute;}

.pink {  filter: hue-rotate(20deg);}

.blue {  z-index: 2;}

.orange {  z-index: 3;}

.green {  z-index: 100;}

The orange box still has a higher z-index than the blue one, but is still displayed behind it. This is because the filter value caused the pink box to form a new stacking context.

橙色框的z-index仍然高于蓝色框，但仍显示在其后。这是因为过滤器值导致粉红色框形成新的堆叠上下文。