DOM Positioning

Overview

static: Default position. It does not allow setting properties like top, bottom, left, right, z-index

relative: Acts the same as static. but allows positioning it relatively by putting properties like top, bottom, left, right, z-index

absolute: Remove the DOM from the DOM tree and position it to the root element unless the parent has some position other than static. Ideal way to implemet is, make the current postion absolute and parent element position as relative.

fixed: Move to the top, ignores all the parents, stays there even if it is scrolling

sticky: With sticky position while the parent is relative, the DOM fixed it to the top while scrolling. It is a combination of fixed and relative position. To implement this, the current element should have sticky position and the parent should have relative position.

static vs relative

Both align with regular DOM flow; however, unlike static, in relative We can set the top, bottom, left, right and z-index.

absolute vs fixed

Both ignore the Dom and move to the very top. However, unlike absoluteThe fixed does not scroll.

Combination of absolute and relative

absolute took the Dom to the very top, unlike there is a parent other than static, like relative.

References

1. The CSS Position Property Explained with Examples (freecodecamp.org)

2. Learn CSS Position In 9 Minutes (web-dev simplified)