Difference between absolute and relative position

One of my student was asking  differences about absolute and relative positions, So here some points I have described.                                                                                                                                      

Figure

Source Code

Absolute Position-

When you apply the absolute position to particular element, it would be detached from current flow.
Absolute position is the position which is related to nearest ancestor relative element, If there is no relative ancestor of absolute-positioned element, then it's related to document element.

For example at above figure, we applied absolute to green div,  and green's nearest ancestor relative element is orange div, so left and top of absolute position of green div would be apply from orange div.

If there is not applied relative position to orange div then the ancestor element would be document tag and the left and top value would be apply from document element rather than from orange div.

Relative Position:-

It respects the flow, when you apply the relative position to particular element then the left and top value would be apply from where this element originally is existing.

Like the blue div is existing at below the yellow div, After applied the relative position on blue div it would be moved from where(From below the yellow div) it is existing.