Z指数相对还是绝对？

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是相对的.请参阅我为类似问题撰写的详细答案.

如果其他元素都没有定义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,因为z-index3中的a明显高于2.嗯,你错了:#Y是#X的孩子,a z-index为1.两个高于1,因此,#Z将显示在#X(和#Y)上.

这是一个可以更好地想象这个,或尝试下面的片段的plunker,

.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设置得更高,则子元素将显示在其父元素之上.

因此,它具有"绝对"和"相对"堆栈顺序的元素,就像你所说的那样.

我认为,所有浏览器都处理相同的问题.