z-index如何真正起作用？

Question

z-index实际上如何运作？它是否在没有指定的元素上起作用position？它是否支持具有指定的元素(即使它们在顶部)position？

数字必须像这样负面吗？

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

？或不？所有正数(增加值)是否会以最后一个位于顶部,中间位于中间,第一个位于底部？

我正在向W3Schools学习,他们对此的教训非常混乱!:(

非常感谢提前!

Answer 1

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

必须在元素上设置位置.

不过,在我了解这些细节之前,让我z-index从头开始解释.

每个网页都由所谓的堆叠上下文组成.您可以将这些视为一堆元素.z-index属性确定每个堆栈中项目的顺序,更高的z-index被放置得更高.

所有页面都以根堆叠上下文开头,后者根据根元素构建(正如您所期望的那样).但是可以通过多种方式创建更多堆叠上下文.一种方法是绝对定位的div; 它的孩子将处于一个新的堆叠环境中.

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

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

在这个例子中,我们期望蓝色div在给定z-index的情况下位于灰色顶部之上,对吗？但是,正如你所看到的,它位于底部.当然,这是因为我们没有确定其立场.一旦我们这样做,它就会显示出我们所期望的.同样,你必须设置位置.

规格也告诉我们负值很好.话虽如此,您不需要使用负值.使用正整数也是完美的.z-index元素的默认值为0.

据记载,w3schools是一个众所周知的不可靠的学习来源.虽然它可以是一种快捷方便的资源,但它们的信息存在很多空白,有时甚至是错误的信息.我建议您使用更可靠的来源,如Mozilla Developer Network,以及规格本身.

Answer 2

在我开始解释,让我注意,z-index只有当该元素具有影响呈现的价值position:relative,position:absolute或position:fixed(NOT static),因为每一种使其具有自己的堆叠内容.这意味着,取决于具体情况,值initial或inherit可能或可能不起作用.

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

我认为z-index最好使用子列表进行类比解释.让我们从最简单的例子开始:

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

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

1. 顶层
2. 顶级兄弟姐妹

现在默认情况下,列表中的下方将呈现在它之前的那些之上.所以在这种情况下,2将位于1的顶部.

z-index允许我们做什么实际上是重新排序此列表(在某些范围内).z-index越高,我们的元素列表越往下.

我将在这里使用内联CSS来显示它很简单,但你绝对应该避免在生产代码中使用内联CSS.

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

现在,我们将子列表更改为如下所示:

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

大!现在,我们HTML中的第一个元素将呈现在第二个元素之上.

当我们处理子(嵌套)元素时,这变得更加棘手.

考虑这种情况的一种更简单的方法是认为当元素开始渲染时,它会在移动到任何兄弟姐妹之前渲染元素的所有子元素.

另请注意,子列表不能更改级别,这意味着它们不能与父级或子级元素位于同一级别.

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

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

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

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

因此,我们看看我们的顶级水平,看看哪一个位于列表的底部.在这种情况下,2.0是,所以它将在1.0之上.然后我们查看它是否有任何子列表(子).它没有,所以我们去1.0.

1.0有一个孩子,1.1,它在视觉上高于1.0(就像我们没有给它一个z-index那样),但它仍然低于2.0,因为1.0低于2.0.

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

我们来看一个稍微复杂的例子:

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

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

我会把它给你,但尝试自己做是好的.

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

因此,就顺序从上到下的顺序而言,顺序为2.1,2.0,1.3,1.2.1.1,1.0.

那不是那么糟糕,是吗？

无论有多深,或有多少兄弟姐妹,这种行为都是正确的.

儿童在父母之上呈现的规则的唯一例外是孩子有负面的z-index.当给出负z-index时,它将自己置于父元素下面.

因此,如果我们有以下内容:

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

子列表树看起来像这样:

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

从上到下的分层将是2.0,1.0,1.1.

一个稍微复杂的例子:

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

清单代表:

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

但是,你应该避免负面的z-indexES.如果您认为自己需要它们,则可能是您的HTML结构不正确.

就是这样!如果您仍然有兴趣了解更多信息,那么阅读规范总是很好.

请记住,其他属性(包括但不限于opacity)transform和will-change创建自己的堆叠上下文可能会影响元素的呈现顺序.

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