z-index属性如何真正起作用? [英] How does the z-index property really work?

问题描述

z-index实际如何工作? 它对没有指定position的元素起作用吗? 它是否支持具有指定position的元素(即，使其位于顶部)?

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?

推荐答案

允许使用负整数和正整数.

位置必须在元素上设置.

在开始介绍这些细节之前，让我从头开始解释z-index.

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

每个网页都由所谓的堆栈上下文组成.从字面上看，您可以将它们视为一堆元素. z-index属性确定每个堆栈中项目的顺序，其中较高的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.

所有页面均以根堆栈上下文开头，该上下文从根元素开始构建(如您所愿).但是，可以通过多种方式创建更多的堆栈上下文.一种方法是绝对定位div；它的子级将处于新的堆叠环境中.

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.

正如我之前所说，z-index仅在明确地设置元素的位置时才生效.这意味着将其设置为fixed，absolute或relative.我认为最好通过示例来说明.

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.

在此示例中，我们期望蓝色div会在灰色div的顶部Z索引，对不对?但是，正如您所看到的，它在底部.当然，这是因为我们尚未设定位置. 一旦完成此操作，它将按预期显示. 同样，您必须设置位置.

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.

规范还告诉我们，负值是可以的.话虽如此，您不需要使用负值.也可以使用正整数也很好.元素的默认z-index值为0.

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.

据记录，w3schools是众所周知的不可靠的学习资源.尽管它可以是一种快速便捷的资源，但它们的信息仍然存在很多空白，有时甚至是错误的信息.我建议您使用更可靠的资源，例如 Mozilla开发人员网络，以及规范本身.

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屋！