What is the difference between position: relative and position: absolute in CSS? And when should you use them?
Relative : Relative to it’s current position, but can be moved. Or A RELATIVE positioned element is positioned relative to ITSELF.
Absolute : An ABSOLUTE positioned element is positioned relative to IT'S CLOSEST POSITIONED PARENT. if one is present, then it works like fixed.....relative to the window.
Md. Arif
Here, 2nd parent div position is relative so the middle div will changes it's position with respect to 2nd parent div. If 1st parent div position would relative then the Middle div would changes it's position with respect to 1st parent div. Details