CSS Positioning Explained

Master the five position values that control element layout in CSS

1 The CSS Position Property

The position property specifies how an element is positioned in a document. It works with the top, right, bottom, and left properties to determine the final location.

Position Values:

1 static (default)
2 relative
3 absolute
4 fixed
5 sticky

Key Concepts:

Normal flow vs. removed from flow
Positioning context (containing block)
Stacking context (z-index)

2 Static Positioning (Default)

position: static is the default value. Elements render in order as they appear in the document flow.

! Ignores top, right, bottom, left properties
! No special positioning behavior
! Elements appear exactly where they're coded

Box 1 (static)

Box 2 (static)

Box 3 (static)

3 Relative Positioning

position: relative positions the element relative to its normal position.

! Adjust position with top, right, bottom, left
! Original space in flow is preserved
! Creates a new stacking context

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

Box 1 (static)

Box 2 (relative)

Box 3 (static)

4 Absolute Positioning

position: absolute removes the element from normal flow and positions it relative to its nearest positioned ancestor.

! No space is created for the element in flow
! Positioned relative to nearest positioned ancestor (not static)
! If no positioned ancestor, uses document body

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

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

Box 1 (static)

Box 2 (absolute)

Box 3 (static)

5 Fixed Positioning

position: fixed positions the element relative to the viewport.

! Removed from normal document flow
! Stays in same place even when scrolling
! Common for navigation bars, modals, etc.

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

Box 1 (static)

Fixed Box

Box 2 (static)

6 Sticky Positioning

position: sticky is a hybrid of relative and fixed positioning.

! Element is relative until scroll reaches threshold
! Then "sticks" in place like fixed positioning
! Requires at least one threshold value (top, bottom, etc.)

.header {
  position: sticky;
  top: 0; /* Stick when scrolled to top */
}

Sticky Header

Content 1

Content 2

Content 3

7 Positioning Summary

Position Value	Relative To	In Flow?	Common Uses
static	Normal flow	Yes	Default behavior
relative	Its normal position	Yes (space preserved)	Minor adjustments, creating positioning context
absolute	Nearest positioned ancestor	No	Overlays, tooltips, precise placement
fixed	Viewport	No	Navigation, modals, persistent elements
sticky	Scroll container	Yes until threshold	Sticky headers, table columns

Pro Tips:

★ Use position: relative on parent to create a positioning context for absolute children
★ Fixed elements can cause content underneath to jump - account for this with padding/margin
★ Sticky positioning requires a threshold value (like top: 0) to work
★ Remember that positioned elements create stacking contexts - use z-index to control overlap