CSS Position:Absolute -> Am I missing something??

[FoxRocks]

Hello,

I've been struggling with css positioning on this new project. I think I'm missing something. Here is what the W3 say:


An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties

So that leads me to believe if I've got this:



<div id="wrapper">

<div id="stupidthingthatwontwork">
here is a picture of something
</div>

<div id="nextlayer">
here is some text
</div>

</div>

#wrapper {
width: 760px;
margin: auto;
background-color: #AB9D72;
border-color: #C5CAFE;
border-width: 1px;
border-style: solid;
z-index:1;
}

#stupidthingthatwontwork {
position: absolute;
top: 150px;
left: 150px;
width: 500px;
height: 500px;
border: solid;
border-color: #C5CAFE;
border-width: 1px;
z-index: 2;
}

#nextlayer {
width: 200px;
height: 200px;
z-index: 3;
}



...that my "wrapper" is my "containing block" and that the "stupidthingthatwontwork" will be 150 px from the top left corner.

For some reason I can't get it to work. Now this does lead to my other post HERE (http://www.webdevforums.com/showthread.php?t=25881) about z-index which as far as I can tell the "stupidthingthatwontwork" would also be on top of the "wrapper" at that specified location, under the "nextlayer" and overlapped by 50px.

Am I missing something?

yes I am regretting the name I chose for the stupid layer.

~FOX~

[Wickham]

An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties

Yes, but only when the container has position: relative so add position: relative; to #wrapper and it will take positions from the top left corner of #wrapper instead of top left corner of the screen..