Absolute Positioning Issue

Question

Hi, I can't find a title for this because it's a complicated issue.

Let's say i have this:

<div style="color:red;width:900px;height:250px;">
I Can Control This DIV
</div>

<div style="position:absolute;top:0px;color:green;width:40px;height:40px">
I CANNOT control this DIV
</div>

Is there any way for the first div to reserve it's area and the 0px should be beneath it.

I mean i want the second div to stay beneath the first div like it's inside an iframe BUT i don't want to use iframes or frames at all.

Any way? i don't have a prob if it's Javascript solution.

Thanks

Answer 1

Can you wrap both of them in another div and them control that one?

Answer 2

You can enclose second div in position:relative container. This way, top:0px will be counted from that div and not the whole window:

http://jsfiddle.net/z9KbD/

Explanation is in definition of position:absolute: Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static.

Answer 3

If you give the second div a clear:both, that should do the trick I think you are looking for. Essentially, it will act as a carriage return for that div.

On a side note, if you were looking to absolutely position an element, you will need a parent element that contains it to be relatively positioned. Chris Coyier goes over it in depth here.