CSS | Position

1. Static
1. Default position static. While display block or inline default position static.
2. When position static then direction attributes (top, right, bottom and left) are auto. So, you can't add directional attributes when use positon static.
3. Render in order. Programmer sequence flow. 
2. Relative
1. An element relatively move form its current position.  
2. Directional attributes required for shifting form it's current position normally (top, left, right, bottom). It's its basic strategy.
3. If you not set top, left, down or right position properties then it's act like position static. So, if there is no position properties then child (absolute) only follow.
4. If z-index isn't set it will appear always top (static element will not appear).
5. Element follow the flow of a page elements (parent, child or sibling).
3. Absolute
1. Find parent and position property follow form its parent.
2. Suppose directional attributes is not present but postion:absolute is still present then it's overlap means it look like that it's not the element of parent div. Flow looks like it is not in there. So, using this attribute it's not follow the flow.
3. You can stretch by using top - bottom or left - right.
4. Like relative is absolute moves like its current position?
1. No and never.
5. How it's move?
1. The parent has relative position attribute. Absolute div follow nearest parent with relative attributes.
6. It no one parent has relative position attribute ?
1. Hahaha DOM is father of all parent and it's relative. So, Absolute div follow browser window.
4. Fixed 
1. Always relative to its document window.
2. Directional attributes required.
3. You can stretch by using top - bottom or left - right even height. 

⌚ <a href="https://excellentprogrammingtricks.blogspot.com/2018/10/css3-essentials.html">CSS3 Essentials</a> &nbsp;