Positioning Elements

The position property specifies the type of positioning method used for an element.

There are five different position values: static, relative, fixed, absolute, and sticky.

/* Static - Default */
div {
  position: static;
}

/* Relative - Relative to normal position */
.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

/* Absolute - Relative to nearest positioned ancestor */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

/* Fixed - Relative to viewport */
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* Sticky - Toggles between relative and fixed */
.sticky {
  position: sticky;
  top: 0;
}

• static - Default, normal flow
• relative - Relative to normal position
• absolute - Relative to positioned ancestor
• fixed - Relative to viewport
• sticky - Sticky positioning

<div class="container">
  <div class="static">Static (default)</div>
  <div class="relative">Relative Position</div>
  <div class="absolute">Absolute Position</div>
</div>
<div class="fixed">Fixed Position</div>