Absolute positioning inside absolute position
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.
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.