CSS Positioning

The position property controls how elements are positioned in the document flow. It works with top, right, bottom, and left properties.

Position Types

static: Default, follows normal document flow.

relative: Positioned relative to its normal position.

absolute: Positioned relative to nearest positioned ancestor.

fixed: Positioned relative to viewport, stays on scroll.

sticky: Switches between relative and fixed based on scroll.

/* Positioning */
.static {
  position: static;
}

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.sticky {
  position: sticky;
  top: 0;
}