CSS z-index似乎沒有反應

我正在一個頁面上工作，我試圖創建一個圍繞在畫布周圍的彩色樂隊的幻覺。CSS z-index似乎沒有反應

爲此，我將圖形導出爲兩個圖像 - 一個位於畫布後面，另一個位於前面。

對於畫布（下面鏈接中的.footer-container），我設置位置：relative和z-index爲2，對於「後面」圖層，我設置position：absolute和z-index爲1，對於「前置」層我做了同樣的事情，但Z值爲3.

但無論我做什麼，我都無法將任何圖片放在畫布後面。目前這兩個IMG嵌套在畫布的div中，但我也嘗試了相同的過程，他們不在那裏。另外，我在同一頁上的另一個地方做了類似的事情，它的工作原理 - 我似乎無法理清我在做什麼錯了？

這裏是執行一個鏈接：

http://dl.dropbox.com/u/706446/SFB%20html%20mockups/z-index-problem.html

謝謝！

來源

2011-12-10 funkylaundry

我認爲問題是，包裝DIV＃頁腳容器具有2.將圖片在div之外的z-index，它應該工作 –

ERR不能在此刻測試，但嘗試：從'footer-container'中刪除定位，將'footer-stripes_back''z-index'設置爲'-1'。 *應該*工作...或者只是重新排列元素（即將第一個圖像放在div外） –

我找到了一個解決方案：

不要設置在div#footer-container的z-index。將z-索引div.footer-stripes_back設置爲-1。您可以刪除div.footer-stripes_front的z索引，它不是必需的，您可以保持DOM結構不變。適用於Chrome。

來源

2011-12-10 12:52:24

是啊！有用！感謝您的迅速回復。我一直在玩負值，但我從來沒有嘗試從＃頁腳容器中刪除z-index ...任何人都可以解釋爲什麼帶有z-index：-1的圖像在容器前跳過z-指數：2＆pi; – funkylaundry

這是因爲外部Container定義了最小值。因此，如果您的外部容器的z-index爲4，那麼您的內部元素只會對> 4的z-index值做出響應。 –

儘管在IE7中運行得並不順利。 – Nix

很難看到結果，因爲容器沒有背景。

#footer-top { 
    background:#fff; 
    position:relative; 
    z-index:3; } 

#footer-back { 
    background:#fff; 
    position:relative; 
    z-index:3; } 

.footer-stripes_front {  
    position:absolute;  
    z-index:4; } 

.footer-stripes_back {  
    position:absolute;  
    z-index:2; }

來源

2011-12-10 13:04:32 Nix

CSS z-index似乎沒有反應

回答

相關問題