CSS — Position

What is Position?

The position property controls how an element is placed in the document. Combined with top, right, bottom, and left, it gives you precise control.

Position Values

static (Default)

Elements flow naturally in the document. top/right/bottom/left have no effect:

.box {
  position: static;  /* default — no special positioning */
}

relative

Positions the element relative to its normal position. The space it occupied stays reserved:

.box {
  position: relative;
  top: 20px;   /* moved 20px down from where it would be */
  left: 10px;  /* moved 10px right */
}

absolute

Removes the element from normal flow. Positions relative to the nearest positioned ancestor (any ancestor with position other than static):

.parent {
  position: relative;  /* becomes the positioning context */
}

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

If no positioned ancestor exists, it positions relative to the viewport.

fixed

Removes from normal flow. Positions relative to the viewport — stays in place when scrolling:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

sticky

Hybrid of relative and fixed. Scrolls normally until it reaches a threshold, then "sticks":

.header {
  position: sticky;
  top: 0;  /* sticks when it reaches top of viewport */
}

Practical Examples

Sticky Navigation Bar

.navbar {
  position: sticky;
  top: 0;
  background: white;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

Center a Modal

.modal-overlay {
  position: fixed;
  inset: 0;  /* shorthand for top/right/bottom/left: 0 */
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
}

Badge on Icon

.icon-container {
  position: relative;
  display: inline-block;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Dropdown Menu

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  min-width: 200px;
}

z-index

Controls stacking order (higher = on top):

.modal { z-index: 1000; }
.tooltip { z-index: 1001; }  /* appears above modal */
.dropdown { z-index: 100; }

Important: z-index only works on positioned elements (not static).

position: fixed vs sticky

Feature	fixed	sticky
Removed from flow	Yes	No
Stays on scroll	Always	Only when threshold reached
Needs scroll	No	Yes
Affects layout	Yes	No

Common Mistakes

1. Using z-index on static elements — it won't work
2. Forgetting position: relative on parent — absolute child positions to viewport
3. Using fixed for sticky headers — use sticky instead
4. Not setting top/left/etc. — positioned element stays in place

Mini Practice

1. Create a sticky header that stays at the top when scrolling
2. Build a centered modal with an overlay
3. Add a notification badge to an icon
4. Create a dropdown menu that appears on hover
5. Layer elements using z-index

Up Next

Next: Display →