Absolutely positioned element is appearing on top of my other elements

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

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.

final result should appear after HTML AND CSS

Please let me know.

Easier to help if you have an example online for us to look at — Markus Hedlund, May 13 '11 at 08:45
http://jsfiddle.net/FwgfT/ seems right to me... what's exactly wrong? — sled, May 13 '11 at 08:48
the problem is `#pattern` class i don't want to set it over all images (i.e logo and author details). i just want tha pattern over above background image or `#header`. please check the image i submited for final results i want. — Muzammil, May 13 '11 at 10:10

limitlessloop · Accepted Answer · 2011-05-13T11:09:02.750

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.

Absolutely positioned element is appearing on top of my other elements

1 Answers1