CSS Positioning

Introduction

CSS positioning determines exactly how elements appear on the page. Once you understand the five positioning types, you can create layouts, tooltips, popups, badges, sticky headers, and more — with full control.

1. Static Positioning

Static is the default position. Elements stay in normal document flow.

.box {
  position: static;
}

2. Relative Positioning

Relative keeps the element in normal flow but allows shifting from its original spot. 

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

3. Absolute Positioning

Absolute removes the element from normal flow and positions it relative to the nearest positioned parent. 

.parent {
  position: relative;
}

.child {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

4. Fixed Positioning

Stays attached to the viewport — does not move when scrolling. Perfect for navbars or floating widgets. 

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

5. Sticky Positioning

Sticky behaves like relative until you scroll past a threshold, then sticks to the specified edge. 

header {
  position: sticky;
  top: 0;
}

Z-Index

Controls what element appears on top when overlapping.

.box {
  position: absolute;
  z-index: 10;
}

Practical Example: Badge on a Card

.card {
  position: relative;
  width: 200px;
  padding: 20px;
  background: #1a1a1a;
  border-radius: 6px;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #00ff99;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
}

Summary

Quick comparison: