Абсолютно позиционированный элемент появляется поверх других моих элементов

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

Ну, пожалуйста, прежде всего, проверьте, не ошиблась ли я, дайте мне знать. а также у меня возникли проблемы с тем, что мой шаблон перекрывает все мои занятия. я просто хочу, чтобы этот класс появился над #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>

Будьте осторожны, чтобы не использовать слишком много идентификаторов при использовании их для стилизации элементов. Они могут быть очень мощными, и на большом сайте это может привести к большим трудностям при попытке переопределить их и их дочерние элементы, когда вы захотите.