Div背景圖片Z-Index問題

我想讓我的內容的背景圖像出現在頁眉和頁腳後面。目前，內容背景的頂部突出顯示在頁眉上，您可以看到底部稍微覆蓋了頁腳（請注意頁腳邊框顏色的輕微變化）。我試圖設置應用z-index:-100;內容工作，但也使文本無法選擇。然後，我嘗試將z-index:1;應用於內容，但這並未使內容出現在頁眉/頁腳下。Div背景圖片Z-Index問題

link to website

enter image description here

//html 
<div id="wrapper"> 
    <header> 
     <div id="logo"></div> 
     <nav> 
      <ul> 
       <li id="aboutNav"><a href="template.html">home</a></li> 
       <li id="menuNav"><a href="">menu</a></li> 
       <li id="specialsNav"><a href="">specials</a></li> 
      </ul> 
     </nav> 
    </header> 
    <div id="content"> 
     content <br> goes <br> here <br> 
     <a href="http://www.google.ca" target="_blank">google</a> 
    </div> 
</div> 
<footer> 
    <div id="thumbsDesc"></div> 
    <div id="thumbs"></div> 
</footer> 



//css 
header { 
    width: 100%; 
    height: 100px; 
    background: url(../img/top.png) repeat-x; 
    z-index: 110; 
} 

#wrapper #content { 
    color: #FFFFFF; 
    background: url(../img/body.png) repeat-y; 
    width: 524px; 
    padding: 25px 30px 25px 30px; 
    position: absolute; 
    bottom: 100px; 
    top: 90px; 
    margin: 0 0 0 150px; 
    z-index: 1; 
} 

footer { 
    margin: -107px 0 0 0; 
    width: 100%; 
    height: 107px; 
    background: url(../img/bottom.png) repeat-x; 
    z-index: 100; 
}

來源

2012-05-08 Jon

爲了解決這個問題，你正在使用的頁腳和頭的z-index的，但你忘了位置，如果z-index的是要使用時，元素必須有一個位置：

添加到您的頁腳和頁眉這個CSS：

position: relative;

編輯：

也注意到，在#backstretch背景圖像具有負的z-index，不要使用，一些瀏覽器變得很奇怪......

刪除從#backstretch：

z-index: -999999;

瞭解一點關於Z-Index here!

來源

2012-05-08 23:22:21 Zuul

backstretch是我下載的jQuery插件。我應該修改他們的代碼嗎？ – Jon

取決於負向z-index的問題在較舊的瀏覽器上彈出......如果您需要支持它們，您應該:)個人而言，我遇到了該解決方案的問題，並且必須僅使用正值來組織我的元素堆棧！ – Zuul

聽起來不錯。謝謝你的建議。 – Jon

Z-Index的工作，你還需要給它一個位置：

header { 
    width: 100%; 
    height: 100px; 
    background: url(../img/top.png) repeat-x; 
    z-index: 110; 
    position: relative; 
}

來源

2012-05-08 23:22:35 Steve

它工作得很漂亮。謝謝。 – Jon

設置您的頁眉和頁腳位置爲「絕對」，而且應該做的伎倆。希望它對你的項目有所幫助，祝你好運！

來源

2012-05-08 23:22:39 rafaelbiten

不一定是絕對的。也可以是'親戚'。 – Steve

'位置：相對;'做了詭計。謝謝。 – Jon

@Steve - 是的，但你必須把它設置爲相對的並關心z-index。（在這種情況下），我認爲將它設置爲絕對值並且不關心z索引要容易得多。 – rafaelbiten

Div背景圖片Z-Index問題

回答

相關問題