What is the difference between relative, absolute, fixed, and sticky positioning in CSS?

Answer

Relative: Positions an element relative to its normal static position.
Absolute: Positions an element relative to its closest positioned ancestor or the document if none exist.
Fixed: Positions an element relative to the viewport, making it stay in place during scrolling.
Sticky: Combines relative and fixed; it switches between relative and fixed based on the scroll position.

div {
  position: relative; /* Try changing to absolute, fixed, or sticky */
  top: 10px;
}