38

有什么区别：

  1. z-index: auto
  2. z-index: 0
  3. z-index完全没有

以上所有场景都是针对div包含两个divs 的 a ，div1每个sdiv2分别具有 a z-indexwhich is9和a 10。

封闭div在 HTML 的堆叠上下文中。

4

5 回答 5

36

不指定z-index与z-index: auto; 那是它的初始值。

auto0如果您的元素没有创建自己的堆叠上下文，则意味着同样的事情；例如，它不是相对的、绝对的或固定的。

如果您的封闭div没有定位，那么您将其设置z-index为什么都无关紧要；它和它的所有内容都将参与到 的堆叠上下文中html，它的后代总是位于它的前面。

于 2013-01-01T11:04:32.133 回答
19

@BoltClock 说的是对的。

不指定z-index与z-index: auto;初始值相同。

关于z-index: 0重要的是要注意以下几点：

z-index: 0创建堆叠上下文而不创建z-index: auto。您可以查看MDN以获取有关此的更多信息。

在大多数情况下，这不会影响渲染的元素。

下面的小提琴是一个重要的例子：https ://jsfiddle.net/ramcdvns/3/

代码和解释如下：

<style>
  .box {
    position: relative;
    width: 64px;
    height: 64px;
    top: 32px;
    left: 32px;
  }

  .red {
    background: red;
  }

  .green {
    background: green;
  }

  .blue {
    background: blue;
  }

  #example-0 {
    margin-top: 32px;
  }
</style>

<div id="example-auto">
  <div class="box red">
    <div class="box green" style="z-index: 1"></div>
  </div>
  <div class="box blue"></div>
</div>

<div id="example-0">
  <div class="box red" style="z-index: 0">
    <div class="box green" style="z-index: 1"></div>
  </div>
  <div class="box blue"></div>
</div>

在这两个例子中，red 和 blue 是带有 a 的兄弟姐妹， green 是带有andposition: relative的 red 的子代：position: relativez-index: 1

  • 根
    • 红色的：position: relative
      • 绿：position: relative; z-index: 1
    • 蓝色的：position: relative

在第一个示例中，绿色将位于红色和蓝色之上。这是因为它有一个z-index: 1, 所以一个堆叠上下文被创建并放在根上下文之上。

在第二个示例中，绿色将位于红色之上，但位于蓝色之下。这是因为 red 有z-index: 0，所以它创建了与 blue 相同级别的 stacking context。所以绿色将高于红色（因为绿色也创建了一个堆叠上下文），但低于蓝色，因为它被困在红色的上下文中。

希望小提琴足够清楚，因为很难用语言来解释这一点。

于 2019-09-11T15:08:25.953 回答
6

z-index:0始终是“默认层”（没有显式z-index驻留的所有元素所在的层），并且z-index:auto意味着：“将堆栈顺序设置为其父级”。由于默认情况下父级的所有子级都从“z-layer 0”开始 -相对于它们的父级，因此，影响，z-index:auto并且z-index:0意味着相同的事情：它们都将在同一个“层”中，并且它们的堆叠订单将根据默认堆叠规则，您可以在此处查看。

于 2016-07-05T11:03:01.713 回答
2

z-index：自动

设置堆栈顺序等于其父级。这是默认设置。

z-索引：0

什么也没做

z 索引：不是

将堆栈顺序设置为与其父级相同，与 auto 相同。

z-index：继承

指定 z-index 应该从父元素继承

进一步阅读和测试的参考：

关联

于 2013-01-01T11:05:31.293 回答
-1

n CSS，您可以定位 2 个或更多对象以相互重叠。它们的 z 索引决定了哪些对象在它们重叠的其他对象“前面”或“后面”。对象的 z-index 越高，它将显示的对象的“堆栈中越高”

于 2013-01-01T11:05:36.113 回答