CSS position: static, relative, absolute and fixed

Sources: W3Schools CSS Layout - The position Property | CSS Tricks Absolute, Relative, Fixed Positioning: How Do They Differ?

• Static
• The default. Positioned according to the normal flow of the page.
• Not affected by the top, bottom, left, and right or z-index properties.
• It is useful when you forcefully want to remove some other positioning that was applied to the element outside of your control.
• Relative
• "Relative to itself". Relative to as if it were positioned as static.
• Affected by the top, bottom, left, right and z-index properties.
• Other content will not be adjusted to fit into any gap left by the element.
• Limits the scope of absolutely positioned child elements.
• 
  
• Absolute
• Positioned relative to the nearest non-static positioned ancestor, or the body if there are no such ancestors. 
• Affected by the top, bottom, left, right and z-index properties. 
• Does not leave a gap in the page where it would normally have been located.
• Does not affect the position of any other same-level element
• 
  
• Fixed
• Positioned relative to the viewport (or window), which means it always stays in the same place even if the page is scrolled.
• Affected by the top, bottom, left, right and z-index properties. 
• Does not leave a gap in the page where it would normally have been located.
• The downside of this element is the usability on different screen-sizes. It does not scroll, so if it does not fit the screen, the content is cropped and unreachable.
•