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

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。它们可能非常强大，并且在大型网站上，当您想要覆盖它们及其子元素时，可能会导致很多痛苦。