CSS relative - absolute

Question

Hi all ... I have these two divs one inside another and I have the styles defined .. encapsulating one is relative and the child is absolute .. Now isn't the child supposed to be positioned according to the left top corner of the outer div, #RightSection? .. but its doing it according to the browser window ... any leads? thx in advance

        <div id="RightSection">
            <div id="Panels">

            </div>
        </div>

#RightSection
 {
     position: relative;
 }

#Panels
 {
    position: absolute;
    background-color: Blue;
    width: 100px;
    height: 100px;
    z-index: 9000;
 }

Answer 1

Absolute positioning inside of relative positioned elements is supposed to do what you describe, but it's not always supported behaviour. What browser are you use and what DTD are you serving?

See http://www.brainjar.com/css/positioning/default4.asp for details. It also has a demo of the positioning so that you can verify it works or not in your browser.

I can confirm that this does not work in IE6. I can't vouch for other browsers while I'm at work, though. Brief searching online leads me to believe that this problem exists in IE7 too, and would conceivably be an issue in IE8 as long as it's rendering in IE7 mode.

Answer 2

I have also found that if I do not declare the top and left css parameters for absolutely positioned elements it seems to ignore a parent above it and just jump to the body of the page.

Try just giving it top and left parameters, see if it helps,

#Panels
 {
    position: absolute;
    top: 0;
    left: 0;
    background-color: Blue;
    width: 100px;
    height: 100px;
    z-index: 9000;
 }

It should look just fine once you add in those default parameters.