頁眉和頁腳未示出

我試圖在另一個的頂部位置2或更多的圖像，所以一直在測試下面的代碼頁眉和頁腳未示出

#wrapper div{ 
 
\t width: 100%; 
 
} 
 

 
#header div{ 
 
\t width: 100%; 
 
\t clear: both; 
 
} 
 

 
#content div{ 
 
\t position: relative; 
 
\t overflow: scroll; 
 
} 
 

 
#image1 
 
{ 
 
\t width:100%; 
 
\t top: 0; 
 
\t z-index:2; 
 
\t position: absolute; 
 
\t left: 0; 
 
} 
 
#image2 
 
{ margin-left:3px; 
 
\t position: absolute; 
 
\t left: 25%; 
 
\t top: 150px; 
 
\t z-index: 3; 
 
} 
 

 
#footer div{ 
 
\t width: 100%; 
 
\t float: left; 
 
\t clear: both; 
 
}

<div id="wrapper"> 
 
\t <div id="header"> 
 
\t \t <h3>Testing Header</h3> 
 
\t </div> 
 
\t <div id="content"> 
 
\t \t <img id="image1" src="http://i.stack.imgur.com/dgg87.png" /> 
 
\t \t <img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />    
 
\t </div> 
 
\t <div id="footer"> 
 
\t \t <h3>Testing Foorter</h3> 
 
\t </div> 
 
</div>

然而頁眉和頁腳不會出現，我不確定是否必須浮動或清除它，我一直在jfiddle和我自己的服務器上測試這個，沒有任何東西，圖像標籤填滿了頁面，任何人都可以告訴我如何解決這個問題。

來源

2014-10-20 Ronald

你爲什麼使用絕對定位？ – j08691 2014-10-20 15:46:20

我試圖在另一個位置上放置1張圖片我明白，當您在相對定位的div上使用絕對定位時，您可以實現這一點，如果您有更好的結果，歡迎您提出建議，一直在這一整天。 – Ronald 2014-10-20 15:48:18

啊，當你說另一個時，我認爲你只是意味着從上到下堆疊，而不是Z指數。 – j08691 2014-10-20 15:54:59

更改您的CSS規則：

#content div{ 
    position: relative; 
    overflow: scroll; 
}

到：

#content { 
    position: relative; 
    overflow: scroll; 
    height:500px; 
}

jsFiddle example

首先，#content div沒有被應用到任何東西，因爲它看起來內#content選擇的div哪些不存在。通過刪除該規則的div部分，可以將相對定位應用於內容div，從而允許絕對定位的子級相對於內容容器而不是整個頁面定位，如以前所發生的那樣。

然後您可以根據需要指定內容div的高度。

來源

2014-10-20 16:06:33 j08691

您可以參考您的標題，內容和頁腳#footer #header #content。不需要在CSS中指定div標籤。

編輯JFiddle：

http://jsfiddle.net/50b7qxjs/1/

來源

2014-10-20 15:49:37 LiamWilson94

當我這樣做時，圖像根本無法加載。 – Ronald 2014-10-20 15:50:23

不僅僅是「沒有必要」，問題在於'#header div'和'＃header'是指兩種不同的東西。前者是'＃頭文件'中的一個div，後者是'＃頭文件本身。 – 2014-10-20 15:52:22

對不起，我不明白你是什麼意思.... – Ronald 2014-10-20 15:57:58

這是因爲z-index的在你的

#image1{ 
    width:100%; 
    top: 0; 
    z-index:2; 
    position: absolute; 
    left: 0; 
}

Working Demo

更改的z-index值與z-index:-1

Updated fiddle爲您的要求。

來源

2014-10-20 15:49:59 Benjamin

雖然有幫助，但我希望它們彼此接踵而至，所以現在頁面頂部的標題和頁腳都是正確的。 – Ronald 2014-10-20 15:52:35

你能更清楚一點：\ – Benjamin 2014-10-20 15:53:37

我想要一個標題，表示喜歡hellow歡迎到「網站名稱」，然後在內容div顯示2個圖像在另一個頂部，然後在底部的頁面頁腳，感謝您的幫助。 – Ronald 2014-10-20 15:56:28

頁眉和頁腳未示出

回答

相關問題