Absolutely positioned div within another div

How do I position a nested div relative to it's parent?

[skube]

Ok, I must be missing something...how does one position a nested div relative to it parent div.

I always thought absolutely positioning something actually means that it is positioned relative to it's container, not to the browser window.

So for something like the following:

<style>
div.parent{height:100px; border:1px solid}
div.inner {position:absolute; top:50px}
</style>

<div class="parent">
<div class="inner">This should be 50px down from browser top and 50px down for "outer"</div>
</div>
<div class="parent">
<div class="inner">This should be 150px down from browser top and 50px down for "outer"</div>
</div>

The two outer divs flow after each other, but the inner divs are positioned relative to the window, not the parent div, thus overlapping.

[Reflection]

Try setting the parent to position:relative; I think that should take care of it.

[your_store]

To expand on what Reflection said..

An absolutely positioned item's placement is relative to the first parent whose position property is set to anything besides static i.e. relative, fixed, or absolute.

[skube]

Ah, silly me. Thanks!

[Reflection]

Thanks for expanding your_store I was in a bit of a hurry :)

[your_store]

Not a problem, it's not too often I get to expand on anything here at WW ;)