Absolute positioning inside absolute position

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.

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.

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.

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.

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 */

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.

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.