html - 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.

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.