絕對定位的元素出現在我的其他元素

頂部

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="pattern"></div> 
    <div id="main"> 
     <img src="http://i52.tinypic.com/16i6z9d.jpg" /> 
     <h3 class="text"> 
      Freelance Web/Logo <br /> 
      Designer & Developer <br /> 
      → Muzammil Hussain 
     </h3> 
    </div> 
</div>

CSS：絕對定位的元素出現在我的其他元素

body { font-size:12px/20px; } 
#wrapper { position:relative; } 
#header { width:100%; height:150px; background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x;} 
#pattern { width:100%; height:150px; background:url(http://i51.tinypic.com/ao75eg.jpg) repeat; position:absolute; top:0px; } 
#main { width:1200px; margin:0 auto; margin-top:-103px; } 
#main img { float:left; margin-right:10px; } 
#main h3 { float:left; margin-top:5px; font:12px/20px "Bookman Old Style"; text-shadow: 1px 1px #000; line-height:14px; color:#fff; }

那麼請首先檢查，如果我沒有任何錯誤，讓我知道。還有我的＃模式覆蓋了我所有的課程。我只是希望這個類出現在#header上。但我失去了一些東西。

其實我想要那樣的結果。

final result should appear after HTML AND CSS

請讓我知道。

來源

2011-05-13 Muzammil

更容易幫助，如果你有一個在線的例子，我們來看看 – Znarkus 2011-05-13 08:45:37

http://jsfiddle.net/FwgfT/似乎對我來說......什麼是錯的？ – sled 2011-05-13 08:48:22

問題在於'＃pattern'類，我不想將它設置在所有圖像上（即徽標和作者的詳細信息）。我只想在上面的背景圖片或'＃header'上面放置tha模式。請檢查我想要的最終結果的圖像。 – Muzammil 2011-05-13 10:10:06

這個標記可以提高很多。但是，如果您只是在尋找修補程序，請嘗試將position: relative添加到#main。

發生了什麼是#pattern正在從文檔的自然流出，因爲它已設置position: absolute。因此，除非另有說明，否則它會出現在其父元素中的每個其他元素的頂部。

此外，我會考慮減少您的標記是這樣的......

<div id="wrapper"> 
    <div id="pattern"></div> 
    <img src="http://i52.tinypic.com/16i6z9d.jpg" /> 
    <h3 class="text"> 
     Freelance Web/Logo <br /> 
     Designer & Developer <br /> 
     → Muzammil Hussain 
    </h3> 
</div>

要小心，不要使用他們的風格元素時使用了太多的ID。它們可能非常強大，並且在大型網站上可能會導致很多痛苦，試圖在需要時覆蓋它們及其子元素。

來源

2011-05-13 11:03:46 Mindthetic

絕對定位的元素出現在我的其他元素

回答

相關問題