Absolute positioning inside absolute position

Question

I have 3 div elements.

1st div is bigger (wrap) and has position:relative;

2nd div is positioned absolute to the 1st div relative positioning (and is included in the 1st div)

3rd div is contained in the 2nd div and also has absolute positioning.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

Why is the 3rd div position absolute to the 2nd div (which is also absolute position to the 1st div) and not to 1st div that has relative position ?

Because the 3rd div is absolute positioning to the absolute positioned 2nd div.

Choosy

That is really something what i'am looking for and these answers for your questions made my eyes open :\. – Nitza

absolute: The element is positioned relative to its first positioned (not static) ancestor element – Perfect

Answer 1

Because position: absolute resets the relative position for children just as position: relative does.

There is no way around this - if you want the third div to be absolutely positioned relatively to the first one, you will have to make it a child of the first one.

Hustler

So basically the absolute position become relative position for it's absolute positioned child ? – Choosy

@Choosy kind of. The 0px / 0px position for children gets reset by the position: absolute – Hustler

@Choosy I think you're confusing this a little. position:relative means that element will be positioned (using top, right, bottom left) relatively from its current position. position: absolute means it will be positioned relative to browsers window or first parent with position: absolute or position: relative. – Leanoraleant

Can you share a reference to this online ? Because i couldn't find any ... And ... Thanks a lot – Choosy

@Choosy the very basic reference is here: w3.org/TR/CSS2/visuren.html#choose-position – Hustler

@Leanoraleant - that's a really succinct way to explain that – Helgoland

Answer 2

Both position:relative and position:absolute establish containing elements as positioning ascestors.

If you need div 3 to be positioned based on div 1 then make it a direct child of div 1.

Note that position: relative means the element is positioned relative to its natural position and position: absolute means the element is positioned relative to its first position:relative or position:absolute ancestor.

Openwork

I wanted the 3rd div to be absolute positioned to the absolute positioned div but i did't know if this is standard (crossbrowser) .. and i couldn't find specifications online ... Thanks a lot – Choosy

Absolute positioning in that section: w3.org/TR/CSS21/visuren.html#comp-abspos – Openwork

@MikeTunnicliffe absolute means element is positioned relative to its first position:fixed also – Kilocycle

Answer 3

Position static: the static position is the default way an element will appear in the normal flow of your HTML file if no position is specified at all.

Important: top, right, bottom and left properties HAVE NO EFFECT ON A STATICALLY POSITIONED ELEMENT.

Position relative: positioning an element with the relative value keeps the element (and the space it occupies) in the normal flow of your HTML file.

You can then move the element by some amount using the properties left, right, top and bottom. However, this may cause the element to overlap other elements that are on the page—which may or may not be the effect that you want.

A relatively positioned element can move from its spot, but the space it occupied remains.

Position absolute: applying the absolute position value to an element removes it from the normal flow. When you move the absolute positioned element, its reference point is the top/left of its nearest containing element that has a position declared other than static—also called its nearest positioning context. So, if no containing element with a position other than static exists, then it will be positioned from the top-left corner of the body element.

In your case 3rd's nearest containing container is 2nd.

Medius

Answer 4

Yet another clarifying answer.

Your current scenario is this:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

And you're kind of struggling with it.

If you can change the HTML, simply do this:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

Thurber

my-wrapper probably should be .my-wrapper – Doggoned

This approach is amazing, I still have no idea why it solved my problem. My problem is that I can't have my third element to be child of the first element due to some other reason. – Politian

Answer 5

The reason why the 3rd div element is absolutely positioned to the 2nd div element is because as the CSS spec explains here, is because the "parent" element (better said: containing block) of an absolutely positioned element is not necessarily its immediate parent element, but rather its immediate positioned element i.e. any element whose position is set to anything but static for example position: relative/absolute/fixed/sticky;

Hence, whenever possible in your code, if you want the 3rd div element be absolutely positioned in regards to the 1st div you should make your 2nd div element as position: static; which is its default value (or just simply remove any position: ... declaration in the rule set of your 2nd div element).

The above will make the 1st div the containing block of the 3rd absolutely positioned div, ignoring the 2nd div for this positioning purpose.

Hope it helps.

Groundsel

what you mentioned, here exact url, thanks this is what I'm looking for. – Carolyn

Answer 6

In case anyone is still looking for an answer to this.

I was able to achieve this result by adding a clear: both; style to the first absolutely positioned div which reset the child and allowed it to use it's own absolute positioning.

Appoint