Position DIV relative to containing DIV Without Moving Other Stuff

Question

[I'm not sure if this question has been asked, though I've looked around a bit.]

I have a DIV inside a DIV. I would like the inner DIV to have a certain position inside the outer div. I'm having some success with this

position: absolute; top: 0px;right:0px;

but all other divs are getting moved around. I just want it to float on top of the other stuff (float didn't work, of course).

Thanks!

Edit: The outer div is relative, and I'd like the inner to move with it when the browser is resized.

Edit: Sorry, I've figured out the question (but not the answer): if I use right:0px, the inner div stops moving relative to the outer div and starts moving relative to the browser window. Why would that be?

Answer 1

Use position: absolute on the inner element. If you outer element is relatively positioned like you say, you can set the position based on the top-left of the outer element.

Answer 2

Hi,

If you apply relative positioning to the outer div

Then absolute positioning to the inner div, your inner div will position relative to the outer div.

(top:0; left:0 will be where ever the top left of our outer div is.

<div>other Div</div>
<div style="position:relative;">
    <div style="position:absolute; top: 100px;">Abs Div</div>
</div>