Positioning — CSS

Positioning (static, relative, absolute, fixed, sticky)

The position property controls how an element is positioned relative to the normal flow. Static is the default; relative adjusts position within the flow; absolute removes from flow; fixed removes from flow and fixes to viewport; sticky is a hybrid that sticks while scrolling.

Position Values

Value	Behavior	Use Case
static	Default, follows normal flow	Most elements
relative	Normal flow, offset with top/left/etc	Small adjustments
absolute	Removed from flow, positioned relative to parent	Overlays, tooltips
fixed	Removed from flow, fixed to viewport	Modals, sticky navigation
sticky	Flows normally until scrolling threshold	Sticky headers

CSS

/* Static (default) */
.element {
  position: static;
  /* Follows normal flow, top/left/etc ignored */
}

/* Relative */
.element {
  position: relative;
  top: 10px;
  left: 20px;
  /* Offset from normal position, flow preserved */
}

/* Absolute */
.element {
  position: absolute;
  top: 10px;
  left: 20px;
  /* Removed from flow, positioned relative to parent */
}

/* Fixed */
.element {
  position: fixed;
  top: 10px;
  left: 20px;
  /* Fixed to viewport, stays in place while scrolling */
}

/* Sticky */
.element {
  position: sticky;
  top: 0;
  /* Flows normally, sticks when scrolling reaches top */
}

Common Positioning Patterns

CSS

/* Centered overlay */
.overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Sticky header */
header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

/* Badge positioned absolutely */
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
}

/* Fixed sidebar */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 250px;
  height: 100vh;
  overflow-y: auto;
}

Note

Position controls element layout behavior. Static is default. Relative preserves flow but offsets position. Absolute removes from flow. Fixed removes from flow and fixes to viewport. Sticky is a hybrid that sticks while scrolling.

Relative positioning: [position: relative](/css/position-relative).