是元素的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)各个浏览器如何在它们的实际实现上有所不同？
谢谢！
解决方法@H_301_19@
z-index是相对的。看到这
detailed answer，我写了一个类似的问题。
If none of the other elements have a defined z-index,using
z-index: 1 will be fine.
Model: How is the z-index determined?@H_301_19@
06000
First,the direct
child nodes of the body are walked through. Two elements are
encountered: #A and #F. These are assigned a z-index of 1 and 2. This
step is repeated for each (child) element in the document.
Then,the manually set z-index properties are checked. If two
z-index values equal,their position in the document tree are
compared.
Your case:
06001
You’d expect #Y to
overlap #Z,because a z-index of 3 is clearly higher than 2. Well,
you’re wrong: #Y is a child of #X,with a z-index of 1. Two is
higher than one,and thus,#Z will be shown over #X (and #Y).
这里是一个plunker可视化这一点更好：
http://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs?p=preview
If none of the other elements have a defined
z-index,using
z-index: 1will be fine.Model: How is the z-index determined?@H_301_19@
06000
First,the direct
child nodes of the body are walked through. Two elements are
encountered: #A and #F. These are assigned a z-index of 1 and 2. This
step is repeated for each (child) element in the document.Then,the manually set
z-indexproperties are checked. If two
z-indexvalues equal,their position in the document tree are
compared.Your case:
06001
You’d expect #Y to
overlap #Z,because az-indexof 3 is clearly higher than 2. Well,
you’re wrong: #Y is a child of #X,with az-indexof 1. Two is
higher than one,and thus,#Z will be shown over #X (and #Y).
这里是一个plunker可视化这一点更好：
http://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs?p=preview
