HTML，CSS，z-index

我無法理解z-index的一些內容，如果你看看這個fiddle，你可能會發現div背後有一個隱藏的跨度。HTML，CSS，z-index

我已經知道所有的元素都有z-index: 'auto';這說明它們從父母繼承z-index，唯一具有z-index的元素是具有z-index: 0;的html元素，所以如果我剛剛講的是真的元素（with position absolute, fixed, relative）默認應該有z-index: 'auto';這基本上是z-index: 0;。

現在，如果你看看這個fiddle我的div元素，並讓我吃驚的跨度不再隱藏設置z-index: 0;，我很驚訝，因爲在div默認z-index應該和DIV應該隱藏跨度。

所以我的問題就是爲什麼當我設置z-index: 0; DIV元素跨度不再隱藏，我的意思是跨度應保持不躲？

來源

2014-05-10 Aviel Fedida

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ – CBroe

你的跨度是在div中，因此無論如何都會保持在上面。現在注意，如果你將你的跨度移到外面，那麼它將被同樣視爲新的兄弟（div），並且在這種情況下將保持隱藏。 – AVK

我明白，但如果你看看我的兩個鏈接，當我添加z-index時，有什麼區別：0;默認爲z-index時爲div; 0; –

希望這會有所幫助。

的默認值：auto

該規範具有這樣說的默認值，auto：

在當前堆疊內容所生成的框的層疊級別相同（CSS2.1：9.9.1）

這意味着：你可以不使用t與z-index:auto重複任何元素爲z-index:0。但區別是z-index:auto將不會建立堆棧上下文，但後者。

您可能會理解短語'stacking context'作爲由z-index不是auto的元素建立的新塊。

要看到具體的問題：

1）span{z-index:-1} &沒有明確的z-index爲DIV，其實現在的div{z-index:auto}

鑑於堆疊的規則，DIV韓元不會建立新的堆疊環境，因此其子級放置在與元素元素相同的堆疊環境中。換句話說，跨度爲是在後面的元素元素。

2）span{z-index:-1} & div{z-index:0;}

在這種情況下，跨度是由DIV，不包含塊的初始堆疊環境任何more.Remember此建立的堆疊環境的一部分。因此，span將永遠不會堆疊在其堆疊上下文的背景下，就像您的第二個小提琴演示一樣。

P.S.在CSS2.1之前，堆棧規則並不是這樣。 ;-)

來源

2014-05-11 08:19:38

謝謝你的回答@Jc。 –

HTML，CSS，z-index

回答

相關問題