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

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 覆盖了我所有的类(class)时遇到了麻烦。我只想让这个类出现在#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 来设置元素样式时，请注意不要使用太多 ID。它们可能非常强大，并且在大型站点上可能会导致很多痛苦，而在您需要时尝试覆盖它们及其子元素。