CSS Positioning Explained

CSS Positioning Explained

Master the different ways to place elements on your page

Static (Default)

Elements flow in normal document order. Cannot use top/right/bottom/left properties.

Box 1
Box 2
position: static;

Relative

Element is positioned relative to its normal position. Other elements don't adjust.

Box 1
Box 2
position: relative;
top: 24px;
left: 24px;

Absolute

Element is removed from normal flow and positioned relative to nearest positioned ancestor.

Box 1
Box 2
/* On parent */
position: relative;

/* On element */
position: absolute;
bottom: 16px;
right: 16px;

Fixed

Element is positioned relative to viewport. Stays fixed during scrolling.

Box 1
Fixed Box
(This demo is fixed to viewport)
position: fixed;
bottom: 32px;
right: 32px;

Sticky

Element toggles between relative and fixed based on scroll position.

Sticky Box
position: sticky;
top: 16px;

Key Takeaways

  • 1 Static is default - elements flow normally in document
  • 2 Relative adjusts position without affecting others
  • 3 Absolute removes from flow, positions to nearest positioned ancestor
  • 4 Fixed stays in viewport regardless of scrolling
  • 5 Sticky becomes fixed when scrolling past it

Interactive Demo

Try changing the position type and offset values:

0px
0px
Drag me!
Reference