CSS Z-Index 相对还是绝对？

Z-Index Relative or Absolute?

提问by Tom Murray

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?

元素的 z-index 样式是其绝对堆栈顺序，还是相对于其父元素的堆栈顺序？

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?

哪一个会在前面 - #dHello 或 #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?

1) 关于 z-index 的实际标准是什么（特别是关于这个主题）？2) 各个浏览器在实际实现中有何不同？

Thanks!

谢谢！

回答by Rob W

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

z-index是相对的。请参阅我为类似问题编写的详细答案。

If none of the other elements have a defined z-index, using z-index: 1will 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-indexproperties are checked. If two z-indexvalues equal, their position in the document tree are compared.

Yourcase:

<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-indexof 3 is clearly higher than 2. Well, you're wrong: #Y is a child of #X, with a z-indexof 1. Two is higher than one, and thus, #Z will be shown over #X (and #Y).

如果其他元素都没有定义z-index，使用 z-index: 1就可以了。

模型：z-index 是如何确定的？

                                         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-index。对于文档中的每个（子）元素重复此步骤。

然后，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 的孩子，az-index是 1。2 大于 1，因此, #Z 将显示在 #X（和 #Y）之上。

Here is a plunker to visualize this a little better, or try the snippet below ,

这里有一个 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>

回答by Chris G.

Afaik, z-indexdoesn't work unless that element is set to position: relative;If that same element had a child with position: relative;and the z-indexwas set higher, the child would show on top of its parent.

Afaik，z-index除非该元素设置为position: relative;，否则不起作用如果同一个元素有一个子元素position: relative;并且z-index设置得更高，则子元素将显示在其父元素之上。

So it has elements of both 'absolute' and 'relative' stack order as you phrased it.

因此，正如您所说，它具有“绝对”和“相对”堆栈顺序的元素。

All browsers pretty much handle it the same, I think.

我认为，所有浏览器的处理方式都差不多。

回答by Chris Marasti-Georg

Here is the W3C specification for z-index.

这是z-index的W3C 规范。

I think the most important line, based on your question is the following:

根据您的问题，我认为最重要的一条是：

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

渲染树被绘制到画布上的顺序是根据堆叠上下文来描述的。堆叠上下文可以包含更多的堆叠上下文。从父堆栈上下文的角度来看，堆栈上下文是原子的；其他堆叠上下文中的盒子可能不会出现在它的任何盒子之间。

This seems to indicate that nothing can be drawn in between the div with z-index: -100and the div with z-index: 200.

这似乎表明在 div withz-index: -100和 div with之间不能绘制任何东西z-index: 200。

回答by Ali Paeizi

For example:

例如：

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