Z指数相对还是绝对？
我试图find以下问题的答案：
元素的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）各个浏览器在实际执行中如何变化？
谢谢！
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。 这些被赋予1和2的z索引。对于文档中的每个（子）元素重复该步骤。
然后，检查手动设置的
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）之上。
这里是一个更好的可视化的蹲点： http ://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs?p=preview
Afaik， z-index不起作用，除非该元素被设置为position: relative; 如果那个同样的元素有一个有position: relative;的孩子position: relative; z-index设置得越高，孩子就会显示在其父母之上。
所以它就像你说的那样，具有“绝对”和“相对”堆栈顺序的元素。
所有浏览器几乎都处理它，我想。
这是Z-index的W3C规范 。
我认为根据你的问题，最重要的一条是：
渲染树被绘制到canvas上的顺序是根据堆叠上下文来描述的。 堆叠上下文可以包含更多的堆栈上下文。 从其父级堆栈上下文的angular度来看，堆栈上下文是primefaces的; 其他堆叠环境中的盒子可能不在其任何盒子之间。
这似乎表明在z-index: -100的div与z-index: -100以及z-index: 200的div之间没有任何东西可以被绘制。
例如：
<!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>
