Z指数相对或绝对？ [英] Z-Index Relative or Absolute?

问题描述

我试图找到以下问题的答案：

是一个元素的z索引样式的绝对栈顺序或其堆栈顺序相对于其父？

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

 < div style =z-index：-100> 
< div id =dHellostyle =z-index：200> Hello World< / div> 
< / div> 
 
< div id =dDominationstyle =z-index：100> I Dominate！< / div> 
  

哪一个位于前面 - #dHello或#dDomination？

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

1）关于z-index的实际标准是什么？

< >解决方案

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>手动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，因为 z-index of 3明显高于2.好，
你错了：#Y是#X的子级，有一个 z-index of 1.二是
高于一，因此，#Z将通过#X（和#Y）显示。

这里是一个plunker可视化这个更好一点：$ b​​ $ b http://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs?p=preview

I'm trying to find an answer to the following question:

Is an element's z-index style its absolute stack order, or its stack order relative to its parent?

For instance, suppose I have the following code:

<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>

Which one will be in front - #dHello, or #dDomination?

That's just for examples. I've tried this in multiple places and results seem to vary. I'm seeing if anyone knows of an authoritative source for settling:

1) What are the actual standards regarding z-index (on this topic specifically)? 2) How do individual browsers vary in their actual implementation of this?

Thanks!

解决方案

z-index is relative. See this detailed answer, which I wrote for a similar question.

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?

                                         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

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:

<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

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).

Here is a plunker to visualize this a little better: http://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs?p=preview

这篇关于Z指数相对或绝对？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！