绝对定位的元素出现在我的其他元素之上

Question

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

那么首先请检查我是否有任何错误让我知道。而且我也遇到麻烦，我的#pattern覆盖了我所有的课程。我只想让这个类出现在#header上。但我缺少的东西..

其实我想要那样的结果。

请告诉我。

Answer 1

这个标记可以得到很大改善。但是，如果您只是想要修复，请尝试将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。它们可能非常强大，在大型网站上可能会导致很多痛苦，试图在您想要时覆盖它们及其子元素。