css – Z-Index相对或绝对?

前端之家收集整理的这篇文章主要介绍了css – Z-Index相对或绝对?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图找到一个答案以下问题:

是元素的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是相对的。看到这 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?

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

猜你在找的CSS相关文章