z-index不適合我，我做錯了什麼？

我試圖在黃色的笑臉下面得到藍色的笑臉。我究竟做錯了什麼？z-index不適合我，我做錯了什麼？

HTML：

<div id="group"> 
    <h1 id="sitename"> 
     <a href="/"><img src="http://i5.photobucket.com/albums/y196/dannydude182/smiley-300x300.png" /></a></h1> 
    <a id="listen" target="_blank" href="/"><img src="http://i925.photobucket.com/albums/ad96/emly_haha/annoyed-smiley.jpg" /></a> 
</div>

CSS：

#group { position:relative } 
#sitename { z-index:1 } 
#listen { position:absolute;top:150px;z-index:0 }

Live copy

來源

2011-05-06 J82

雖然實時鏈接是一個偉大的*輔助*你的問題，始終把問題本身相關的標記和代碼。外部鏈接可以被移動，刪除，修改... StackOverflow的目的不僅僅是爲你回答這個問題（雖然這很重要），但也爲未來的其他人提供同樣的問題，所以重要的是，問題和答案基本上是獨立的。 – 2011-05-06 07:23:29

這次我爲你做了。 – 2011-05-06 10:11:02

z-index規則取決於該元素是否是定位與否。如果你將兩個元素都定位，它就可以工作：http://jsfiddle.net/zPJm2/4/

這比我們大多數人認爲當我們第一次使用它時要複雜一點。詳情請參閱actual CSS specification on z-index，但基本上，有多個堆疊環境。從規格：

渲染樹被繪製到畫布上的順序是根據堆疊上下文來描述的。堆疊上下文可以包含更多堆疊上下文。從其父級堆疊上下文的角度來看，堆疊上下文是原子的;其他堆疊環境中的盒子可能不在其任何盒子之間。

每個框屬於一個堆疊上下文。給定堆棧上下文中的每個定位框都有一個整數堆棧級別，這是它在z軸上的位置，與相同堆棧上下文中的其他堆棧級別有關。具有較高堆棧級別的框始終格式化在較低堆棧級別的框之前。盒子可能有負面的堆疊水平。根據文檔樹的順序，在堆疊環境中具有相同堆棧級別的框按照先後順序堆疊。

根元素形成根堆棧上下文。其他堆疊上下文由具有除'auto'之外的'z-index'計算值的任何定位元素（包括相對定位的元素）生成。堆疊上下文不一定與包含塊有關。在將來的CSS級別中，其他屬性可能會引入堆疊上下文，例如「不透明度」[CSS3COLOR]。

在每個堆疊上下文中，下列各層塗在後端到前序：

背景和形成堆疊環境的元素的邊界。

孩子堆疊負面堆棧級別的情況下（最負面的第一）。

流入式，非內聯式，非定位後代。

非定位花車。

流入內聯級別的未定位後代，包括內聯表和內聯塊。

子堆疊堆棧級別爲0的上下文以及堆棧級別爲0的定位後代。

子堆疊正堆棧級別（最不積極優先）的上下文。

來源

2011-05-06 07:18:36

謝謝！我會在12分鐘內給你勾號。 – J82 2011-05-06 07:19:47

如果您希望它位於任何相對位置後面，請將絕對div z-索引設置爲小於零。

來源

2011-05-06 07:19:52 IanNorton

一種可能性是檢查元素上的默認樣式。我試圖重疊一個菜單下拉菜單，並在幻燈片放映中添加了UI和LI元素。我在ul上增加了z索引，但沒有注意到li上防止重疊的z索引1（之前編碼）。希望這有助於有人

感謝爾漢

來源

2012-01-25 20:13:52 Farhan

z-index不適合我，我做錯了什麼？

回答

相關問題