CSS Positioning: The Complete Visual Guide

This is the default position value for all elements. Elements render in order, as they appear in the document flow.

• Ignores top, right, bottom, left properties
• No special positioning behavior
• Elements stack according to normal document flow

.element {
  position: static; /* Default value */
}

The element is positioned relative to its normal position in the document flow.

• Maintains space in document flow where it would normally be
• Can be offset using top, right, bottom, left
• Creates a new stacking context
• Often used as a container for absolutely positioned elements

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

The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor.

• No space is created for the element in the page layout
• Positioned relative to its closest positioned ancestor (not static)
• If no positioned ancestor, uses the document body
• Can overlap other elements

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

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

The element is positioned relative to the viewport (browser window). It stays in the same place even when the page is scrolled.

• Removed from normal document flow
• Positioned relative to the viewport
• Doesn't move when scrolling
• Commonly used for navigation bars, modals, or chat widgets

.fixed-element {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

A hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, then it becomes fixed.

• Initially behaves like relative positioning
• Becomes fixed when scroll position reaches threshold
• Sticks within its parent container
• Great for sticky headers or table column headers

.sticky-header {
  position: sticky;
  top: 0; /* Threshold where it becomes fixed */
}