Absolutely positioned element is appearing on top of my other elements

<div id="wrapper">
    <div id="header">开发者_JS百科;</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.

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.