z-index和css位置之間的關係是什麼？

z-index和css Position:之間的關係是什麼？z-index和css位置之間的關係是什麼？

是否z-index僅在position:absolute或relative或fixed定義？

它從來沒有工作的位置靜態？

當z-index在IE中產生問題？如何慎重使用？

2010-07-20 Jitendra Vyas

z-index定義的相對堆疊順序，絕對和固定位置元素。這意味着它只會在你的元素具有其中一種位置類型時才起作用。

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

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

在上文中，。另一元件會疊加。有些-元件上方，因爲它具有較高的z索引。

舊版本的IE的問題是z-index僅在相同的stacking context中受到尊重。這意味着，在下面的設置，z-index的不一定會正常工作，如果2個圖像重疊：

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。

來源

2010-07-20 13:11:16 Pat

建議：內聯樣式，因此不需要在HTML和CSS之間來回跳轉。 – 2010-07-20 13:19:45

@pat - 所以z-index不關心定位。具有更高z-索引的元素將始終位於頂部。我對嗎？ – 2010-07-20 14:55:35

@ metal-gear-solid：是的，z-index不受位置類型的影響，但只有在元素上指定了3種位置類型之一時才起作用。在我的關於堆疊上下文的回答中查看一下，看看在IE中這並非總是如此。 – Pat 2010-07-20 15:12:29

注意specification的Applies to:部分：

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

而且你可以很容易地使用索引來查找definition of positioned

來源

2010-07-20 12:55:14 Quentin

我很欣賞引用（+1），但爲什麼不直接說出答案？ – 2010-07-20 13:09:37

@Patrick McElhaney - 同意你。我也很期待。 W3C鏈接的內容非常長。 – 2010-07-20 13:11:46

z-index和css位置之間的關係是什麼？

回答

相關問題