Question

我正在尝试找到以下问题的答案：

元素的z-index样式是其绝对堆栈顺序，还是相对于其父元素的堆栈顺序？

例如，假设我有以下代码：

<div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div>

哪一个会在前面 - #dHello，或#dDomination？

这仅仅是为了举例。我在多个地方试过这个，结果似乎有所不同。我看到是否有人知道一个权威的解决来源：

1）关于z-index的实际标准是什么（具体是关于这个主题）？ 2）各个浏览器的实际实现方式有何不同？

谢谢！

Answer 1

z-index是相对的。请参阅我为类似问题撰写的detailed answer。

如果其他元素都没有定义z-index，请使用   z-index: 1会好的。

模型：如何确定z指数？
                                         z-index
<div id=A>                                Auto 1
    <div id=B>                            Auto 1.1
       <div id=C style="z-index:1"></div>          Manual 1
       <div id=D></div>                   Auto 1.1.2
    </div>                                
    <div id=E></div>                      Auto 1.2
</div>
<div id=F></div>                          Auto 2
首先，直接   身体的子节点走过。两个要素是   遇到：#A和#F。这些被赋予z-index为1和2   对文档中的每个（子）元素重复步骤。

然后，检查手动设置的z-index属性。如果两个   z-index值相等，它们在文档树中的位置是   比较。

你的案例：
<div id=X style="z-index:1">          Z-index 1
    <div id=Y style="z-index:3"></div> Z-index 3
</div>
<div id=Z style="z-index:2"></div>    Z-index 2
你期待#Y到重叠#Z，因为3的z-index明显高于2.嗯，你错了：#Y是#X的孩子，z-index是1.两个是高于1，因此，＃Z将显示在#X（和#Y）上。

Here is a plunker to visualize this a little better，或尝试下面的代码段，

.redbox,
.greenbox,
.bluebox {
  height: 100px;
  width: 100px;
  position: relative;
  color: #fff;
  padding: 3px;
}

.redbox {
  background: red;
  z-index: 1;
}

.greenbox {
  background: green;
  top: 40px;
  left: 40px;
  z-index: 3;
}

.bluebox {
  background: blue;
  top: -20px;
  left: 20px;
  z-index: 2;
}

<div id=X class='redbox'>z: 1
  <div id=Y class='greenbox'> z: 3</div>
</div>
<div id=Z class='bluebox'>z: 2</div>

Answer 2

Afaik，z-index不起作用，除非该元素设置为position: relative;如果同一元素的子元素为position: relative;并且z-index设置得更高，则孩子会在父母身上显示出来。

因此，它具有“绝对”和“相对”堆栈顺序的元素，就像你所说的那样。

我认为所有的浏览器都可以处理它。

Answer 3

这是W3C specification for z-index。

根据您的问题，我认为最重要的一行是：

渲染树在画布上绘制的顺序是在堆叠上下文中描述。堆叠上下文可以包含进一步堆叠上下文。从这一点来看，堆叠上下文是原子的其父堆叠上下文的视图;其他堆叠的盒子上下文可能不会出现在任何一个框之间。

这似乎表明在z-index: -100的div和z-index: 200的div之间无法绘制任何内容。

Answer 4

例如：

  <!DOCTYPE html>
<html>
<head>
<style>

.x1 {
    position:relative;
    width:100%;
    clear:both;
    display:block;
  z-index:1000;
}

.x2 {
    position:fixed;
    width:100%;
    height:50px;
    background-color:#ff0000;
}

.x3 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#888;
}
.x4 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#0000ff;
}
.x5 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#ff00ff;
}
.x6 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#0000ff;
}

</style>

</head>
<body>
<div class='x1'>this class is relative
<div class='x2'>this class is fixed</div>
</div>

<div class='x3'>x3: this class is relative</div>
<div class='x4'>x4: this class is relative</div>
<div class='x5'>x5: this class is relative</div>
<div class='x6'>x6: this class is relative</div>
<div class='x3'>x3: this class is relative</div>

</body>
</html>

Z指数相对还是绝对？

4 个答案:

模型：如何确定z指数？