Question

z-index和css Position:之间的关系是什么？

z-index仅在定义position:absolute或relative或fixed时有效吗？

它是否永远不会与位置静态一起使用？

当z-index在IE中出现问题时？如何使用？

Answer 1

z-index定义相对位置，绝对位置元素和固定位置元素的堆叠顺序。这意味着它只有在你的元素具有其中一种位置类型时才有效。

.some-element {
    position: relative;
    z-index: 1;
}

.another-element {
    position: absolute;
    z-index: 2;
}

在上面，.another-element将堆叠在.some-element之上，因为它具有更高的z-index。

旧版IE的问题是z-index仅在同一stacking context中得到尊重。这意味着在以下设置中，如果2个图像重叠，z-index将不一定正常工作：

<强> HTML

<div id="elem1">
    <img src="foo.jpg"/>
</div> 
<div id="elem2">
    <img src="bar.jpg"/>
</div>

<强> CSS

#elem1 {
    position: relative;
}
#elem1 img {
    position: relative;
    z-index: 1;
}
#elem2 {
    position: relative;
}
#elem2 img {
    position: relative;
    z-index: 2;
}

原因是两个图像都在自己的堆叠上下文中，因为＃elem1和＃elem2是position：relative。

Answer 2

请注意specification的Applies to:部分：

'z-index'
   Value:     auto | <integer> | inherit
   Initial:   auto
   Applies to:    positioned elements

-

您可以轻松使用索引查找definition of positioned

z-index和css之间的关系是什么？

2 个答案: