z-index如何真正起作用？ [英] How does z-index really work?

问题描述

z-index 实际上是如何工作的？
它是否在没有指定位置的元素上运行？
是否支持具有指定位置？

的元素（即，使它们位于顶部）数字必须是这样的消极吗？

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

？或不？所有正数（增加价值）的最后是最高的，中间的还是最低的？

我是从W3Schools学习，他们的教训是如此混乱！ ：

>允许使用负数和正数。

必须在元素上设置位置。

然而，在我详述这些细节之前，让我从头开始解释 z-index 。

每个网页都是由所谓的堆栈上下文组成的，您可以将它们看作是一堆元素，z-index属性决定了每个堆栈中的项目顺序， z-index被放置得更远。

所有页面以一个根堆栈上下文开始，该堆栈上下文从根元素开始（如您所期望的）。可以通过多种方式创建，一种方式是绝对定位的div，它的孩子将处于一个新的堆叠环境中。

规格全部列出创建新的堆叠上下文的实例。正如其他人所说，这包括显式定位元素，并且很快将包含不完全不透明的元素。

正如前面所说， code> z-index 仅在明确地设置元素的位置时才会生效。这意味着将其设置为固定，绝对或相对。我认为这是最好的例子。

在这个例子中，我们预计蓝色div会在Z-index上位于灰色顶部，对吗？但是，正如你所看到的，它在底部。这当然是因为我们还没有确定立场。 一旦我们做到了，它就会像我们预期的那样显示。 同样，您必须设置位置。

规格还告诉我们负值是正确的。这就是说，你不需要来使用负值。使用正整数也是很好的。元素的默认 z-index 值为0.

为了记录，w3schools是一个臭名昭着的不可靠的来源学习。虽然它可以是一个快捷方便的资源，但它们的信息存在很多空白，有时甚至是错误的信息。我建议您使用更可靠的资源，例如 Mozilla开发者网络，以及规格本身。

How does z-index actually 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?

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?

I'm learning from W3Schools, and their lesson on this is so confusing! :(

Thanks a lot in advance!

解决方案

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-index from the ground up.

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.

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.

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

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

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 that it displays as we'd expect. Again, you must set the position.

The specs also tell us that negative values are fine. With that said, you don't need to use negative values. It's perfectly fine to use positive integers, too. The default z-index value for an element is 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.

这篇关于z-index如何真正起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！