绝对定位的元素出现在我的其他元素之上(Absolutely positioned element is appearing on top of my other elements)

绝对定位的元素出现在我的其他元素之上(Absolutely positioned element is appearing on top of my other elements) <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上。 但我失踪了..

其实我想要那样的结果。

请告诉我。

<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; }

Well please first of all check if i did any mistake let me know. and also i having trouble that my #pattern overlaying all my classes. i just want this class appear over #header. but something i am missing..

Actually i want results like that.

Please let me know.

最满意答案

这个标记可以提高很多。 但是，如果您只是在寻找修补程序，请尝试添加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。 它们可能非常强大，并且在大型网站上可能会导致很多痛苦，试图在需要时覆盖它们及其子元素。

This markup could be improved a lot. But if you are just looking for a fix try adding position: relative to #main.

What's happening is #pattern is coming out of the natural flow of the document because it has position: absolute set on it. Therefore unless stated otherwise it appears on top of every other element inside it's parent element.

Also I would consider reducing your markup to something like this...

<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>

Be careful not to use too many IDs when using them to style elements. They can be very powerful and on a large site can result in lots of pain trying to override them and their child elements when you want to.