position: absolute

Absolute positioning removes an element from the document flow and positions it relative to its nearest positioned ancestor. This is powerful for overlays and tooltips.

Absolute Positioning Basics

CSS

/* Absolute positioning */
.element {
  position: absolute;
  top: 10px;
  left: 20px;
}

/* Create positioning context with relative parent */
.container {
  position: relative;
}

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}

Common Patterns

CSS

/* Badge positioned absolutely */
.notification-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

/* Overlay that fills parent */
.image-container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

Note

Absolute positioning is useful for overlays and badges. The element positions relative to its nearest positioned ancestor.

Fixed positioning: [position: fixed](/css/position-fixed).