Html z-index 属性如何真正起作用？

How does the z-index property really work?

提问by jamesplease

How does z-indexactually work? Does it function on elements with no specified position? Does it favor elements (i.e. make them on top) that have a specified position?

z-index实际效果如何？它对没有指定的元素起作用position吗？它是否偏爱具有指定 的元素（即使它们位于顶部）position？

Do the numbers have to be negative like this?

数字必须是负数吗？

<div style='z-index:-2;'>below</div>
<div style='z-index:-1;'>less below</div>
<div style='z-index:0;'>on top</div>

Or not? Would all positive numbers (in increasing value) end up with the last being on the top, the middle in the middle, and the first on the bottom?

或不？是否所有正数（值递增）最终都会使最后一个在顶部，中间在中间，第一个在底部？

回答by jamesplease

Both negative and positive integers are allowed.

允许负整数和正整数。

The position must be set on the element.

必须在元素上设置位置。

Before I get into those details, though, let me explain z-indexfrom the ground up.

不过，在我进入这些细节之前，让我z-index从头开始解释。

Every webpage is made up of what are called stacking contexts. You can think of these as, quite literally, a stack of elements. The z-index property determines the order of items in each stack, with higher z-index being placed further up.

每个网页都由所谓的堆叠上下文组成。从字面上看，您可以将它们视为一堆元素。z-index 属性确定每个堆栈中项目的顺序，较高的 z-index 放置得更远。

All pages begin with a root stacking context, which builds from the root element (as you'd expect). But more stacking contexts can be created in a number of ways. One way is an absolutely positioned div; its children will be in a new stacking context.

所有页面都以根堆叠上下文开始，该上下文从根元素构建（如您所料）。但是可以通过多种方式创建更多堆叠上下文。一种方法是绝对定位的 div；它的子项将处于新的堆叠上下文中。

The specslists all of the instances that create a new stacking context. As others have stated, this includes explicitlypositioned elements and will soon include elements that aren't completely opaque.

规范列出了创建新堆叠上下文的所有实例。正如其他人所说，这包括明确定位的元素，并将很快包括不完全不透明的元素。

As I said before, z-indexonly takes effect if you explicitlyset the position of the element. This means setting it to be fixed, absolute, or relative. This is best shown through example, I think.

正如我之前所说，z-index只有在您明确设置元素的位置时才会生效。这意味着将其设定为fixed，absolute或relative。我认为这最好通过例子来说明。

In this example, we'd expect the blue div to be on top of the grey one given its z-index, right? But, as you can see, it's on the bottom. This is, of course, because we haven't set its position. Once we do thatit displays as we'd expect. Again, you must set the position.

在这个例子中，我们希望蓝色 div 在给定 z-index 的灰色 div 之上，对吧？但是，正如你所看到的，它在底部。这当然是因为我们还没有确定它的位置。一旦我们这样做，它就会按照我们的预期显示。同样，您必须设置位置。

The specs also tell us that negative values are fine. With that said, you don't needto use negative values. It's perfectly fine to use positive integers, too. The default z-indexvalue for an element is 0.

规范还告诉我们负值很好。话虽如此，您不需要使用负值。使用正整数也完全没问题。z-index元素的默认值为 0。

For the record, w3schools is a notoriously unreliable source for learning. While it can be a quick and convenient resource, there are lots of gaps in their information, and at times even wrong information. I recommend you to use more reliable sources like the Mozilla Developer Network, and also the specs themselves.

根据记录，w3schools 是众所周知的不可靠的学习来源。虽然它可以是一种快速方便的资源，但他们的信息中有很多空白，有时甚至是错误的信息。我建议您使用更可靠的来源，例如Mozilla Developer Network，以及规范本身。

回答by Zach Saucier

Before I start explaining, let me note that z-indexonly has an affect if the element has renderedvalue of position:relative, position:absolute, or position:fixed(NOT static) because each of these make it have its own stacking context. That means that values like initialor inheritmay or may not work either depending on the situation.

在我开始解释，让我注意的是z-index只有一个影响，如果该元素已呈现的价值position:relative，position:absolute或position:fixed（NOT static），因为每一个做它有它自己的堆叠内容。这意味着值喜欢initial或inherit可能会或可能不会根据情况起作用。

Also note that in this post I'll be using the format 1.1.1 to signify that I am selecting the first element's first child's first child. 2.1.1 would be the second element's first child's first child and so on.

另请注意，在这篇文章中，我将使用格式 1.1.1 来表示我正在选择第一个元素的第一个子元素的第一个子元素。2.1.1 将是第二个元素的第一个孩子的第一个孩子，依此类推。

---

---

I think z-indexis best explained with an analogy using sub lists. Let's start with the simplest example:

我认为z-index最好用使用子列表的类比来解释。让我们从最简单的例子开始：

<div class="top-level"></div>
<div class="top-level sibling"></div>

We can represent this in terms of a list like so:

我们可以用这样的列表来表示：

1. Top level
2. Top level sibling

1. 顶层
2. 顶级兄弟

Now by default the ones further down the list will render on top of the ones before it. So in this case 2 will be positioned on top of 1.

现在默认情况下，列表更下方的将呈现在它之前的之上。因此，在这种情况下，2 将位于 1 之上。

---

---

What z-index allows us to do is essentially reorder this list (within some bounds). The higher the z-index, the further down the list our element is.

z-index 允许我们做的基本上是重新排序这个列表（在某些范围内）。z-index 越高，我们的元素在列表中越靠后。

I'll use inline CSS here to make showing it easy but you should definitelyavoid inline CSS in production code.

我将在这里使用内联 CSS 来简化展示，但您绝对应该避免在生产代码中使用内联 CSS。

<div class="top-level" style="z-index: 1;"></div>
<div class="top-level sibling"></div>

This now changes our sub listing to look like this:

这现在将我们的子列表更改为如下所示：

1. Top level sibling
2. Top level - z-index:1

1. 顶级兄弟
2. 顶级 - z-index:1

Great! Now the first element in our HTML will render on top of our second.

伟大的！现在，我们 HTML 中的第一个元素将呈现在我们的第二个元素之上。

---

---

Where this gets more tricky is when we're dealing with children (nested) elements.

当我们处理子（嵌套）元素时，这变得更加棘手。

An easier way to think about this situation is to think that when an element starts being rendered it will render all children of the element before moving onto any siblings.

考虑这种情况的一种更简单的方法是认为当一个元素开始呈现时，它将在移动到任何兄弟元素之前呈现该元素的所有子元素。

Also keep in mind that sub-lists cannot change levels, meaning they cannot be on the same level of their parent or their children elements.

还要记住，子列表不能改变 level，这意味着它们不能与它们的父元素或它们的子元素处于同一级别。

That means that if we have the following:

这意味着，如果我们有以下内容：

<div class="top-level">
    <div class="sub-level" style="z-index: 1;"></div>
</div>
<div class="top-level sibling"></div>

Our rendering sub lists will look like the following:

我们的渲染子列表如下所示：

1. Top level
   1. Sub level - z-index1
2. Top level sibling

1. 顶层
   1. 子级别 - z-index1
2. 顶级兄弟

Thus, we look our top level and see which one is at the bottom of the list. In this case, 2.0 is, so it will be on top of 1.0. Then we look and see if it has any sub lists (children). It doesn't, so we go to 1.0.

因此，我们查看我们的顶层，看看哪个在列表的底部。在这种情况下，2.0 是，所以它将在 1.0 之上。然后我们查看它是否有任何子列表（子列表）。没有，所以我们转到 1.0。

1.0 has a child, 1.1, which will be visually above 1.0 (just like it would be if we didn't give it a z-index), but it will still be below 2.0 because 1.0 is below 2.0.

1.0 有一个子节点 1.1，它在视觉上会高于 1.0（就像我们没有给它一个 z-index 一样），但它仍然会低于 2.0，因为 1.0 低于 2.0。

Thus the z-index here doesn't help us out because 1.1 doesn't have any siblings.

因此这里的 z-index 没有帮助我们，因为 1.1 没有任何兄弟姐妹。

---

---

Let's take a slightly more complex example:

让我们举一个稍微复杂一点的例子：

<div class="top-level">
    <div class="sub-level" style="z-index: 2;"></div>
    <div class="sub-level sibling"></div>
    <div class="sub-level sibling" style="z-index: 1;"></div>
</div>
<div class="top-level sibling">
    <div class="sub-level"></div>
</div>

What's the sub listing for this example?

这个例子的子列表是什么？

I'll give it to you, but it's good to try and do by yourself.

我会把它给你，但你自己尝试和做也不错。

1. Top level
   1. Sub level sibling
   2. Sub level sibling - z-index1
   3. Sub level - z-index2
2. Top level sibling
   1. Sub level

1. 顶层
   1. 子级兄弟
   2. 子级兄弟 - z-index1
   3. 子级别 - z-index2
2. 顶级兄弟
   1. 子级

Thus, in terms of what the order is visually from top to bottom, the order goes 2.1, 2.0, 1.3, 1.2. 1.1, 1.0.

因此，就视觉上从上到下的顺序而言，顺序是 2.1、2.0、1.3、1.2。1.1、1.0。

That's not so bad, is it?

那还不错，是吗？

This behavior is true no matter how far deep or how many siblings are there.

无论有多深或有多少兄弟姐妹，这种行为都是真实的。

---

---

The only exception to the rule that children are rendered above parents is when the children have a negative z-index. When a negative z-index is given, it places itself below a parent element.

将子项呈现在父项之上的规则的唯一例外是当子项具有否定z-index. 当给出负 z-index 时，它会将自己置于父元素下方。

Thus if we have the following:

因此，如果我们有以下内容：

<div class="top-level">
    <div class="sub-level" style="z-index: -1;"></div>
</div>
<div class="top-level sibling"></div>

The sub list tree would look like this:

子列表树看起来像这样：

1. Sub level - z-index-1
   1. Top level
2. Top level sibling

1. 子级别 - z-index-1
   1. 顶层
2. 顶级兄弟

And the top to bottom layering would be 2.0, 1.0, 1.1.

从上到下的分层将是 2.0、1.0、1.1。

A slightly more complex example:

一个稍微复杂一点的例子：

<div class="top-level">
    <div class="sub-level" style="z-index: -1;"></div>
    <div class="sub-level sibling"></div>
</div>
<div class="top-level sibling"></div>

List representation:

列表表示：

1. Sub level - z-index-1
   1. Top level
      1. Sub level
2. Top level sibling

1. 子级别 - z-index-1
   1. 顶层
      1. 子级
2. 顶级兄弟

But you should avoid negative z-indexes. If you think you need them it is likely that your HTML is structured improperly.

但是你应该避免负z-indexes。如果您认为需要它们，则很可能是您的 HTML 结构不正确。

---

---

That's about it! If you're still interested in learning more, reading the specsis always good.

就是这样！如果您仍然有兴趣了解更多信息，阅读规范总是好的。

Keep in mind that other properties, including but not limited to opacity, transform, and will-change, create their own stacking context and may have an affect on the rendering order of elements.

请记住，其他属性（包括但不限于opacity、transform和will-change）会创建自己的堆叠上下文，并且可能会影响元素的呈现顺序。

---

---

_{opacityworks similarly to z-index - a child can only be as opaque as its parent - but it can't have negative values.}

_{opacity与 z-index 的工作方式类似 - 子项只能与其父项一样不透明 - 但它不能具有负值。}

回答by thhh

The only exception to the rule that children are rendered above parents is when the children have a negative z-index. When a negative z-index is given, it places itself below a parent element.

将子项呈现在父项之上的规则的唯一例外是当子项具有负 z-index 时。当给出负 z-index 时，它会将自己置于父元素下方。

回答by Kevin Bowersox

The css property z-indexonly works on positioned elements, meaning elements must be position absolute, fixed or relative in order for the z-indexproperty to take effect.

css 属性z-index仅适用于定位元素，这意味着元素必须是绝对位置、固定位置或相对位置才能使该z-index属性生效。

The higher the z-index the closer to the front it will appear. The values specified for the z-indexproperty can be positive or negative. A positioned element with a z-indexvalue of 4 will appear above a positioned element with a z-indexvalue of 3.

z-index 越高，它就会越靠近前面出现。为z-index属性指定的值可以是正值或负值。用甲定位元素z-index的4值将出现带有一个定位元件的上方z-index的3值。

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

在 CSS 2.1 中，每个框在三个维度上都有一个位置。除了它们的水平和垂直位置之外，盒子还沿着“z 轴”排列，并被格式化为一个在另一个之上。当框在视觉上重叠时，Z 轴位置特别相关。

回答by FrostyFire

This article on z-indexis just the link you are looking for! He really explains it well.

这篇关于 z-index 的文章正是您正在寻找的链接！他确实解释得很好。

Basically, the higher the number, the higher up on the stack the element will be. So 1 is on top of 0 and -1 is under the z-index of 0, however they should be kept positive, as there is no reason to use negatives; it's considered bad practice. The browser interprets it when it renders the page, like any other CSS or HTML code.

基本上，数字越大，元素在堆栈中的位置就越高。所以 1 在 0 之上，-1 在 0 的 z-index 之下，但是它们应该保持正数，因为没有理由使用负数；这被认为是不好的做法。浏览器在呈现页面时会解释它，就像任何其他 CSS 或 HTML 代码一样。