CSS Positioning Cheat Sheet

Static Position (Default)

.element {
position: static;
}

• Default positioning
• Follows normal document flow
• Ignores top/right/bottom/left/z-index

Relative Position

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

• Positioned relative to normal position
• Creates positioning context for absolute children
• Takes up space in normal flow
• Can use top/right/bottom/left

Absolute Position

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

• Positioned relative to nearest positioned ancestor
• Removed from normal flow
• Other elements ignore it
• Can use top/right/bottom/left

Fixed Position

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

• Positioned relative to viewport
• Stays in place during scrolling
• Removed from normal flow
• Can use top/right/bottom/left

Sticky Position

.element {
position: sticky;
top: 0;
}

• Hybrid of relative and fixed
• Becomes fixed when scroll threshold is reached
• Must specify at least one threshold
• Remains in flow until threshold

Z-Index & Stacking

.element {
position: relative;
z-index: 10;
}

• Controls stacking order
• Only works on positioned elements
• Higher values appear on top
• Can use negative values
• Default is auto (0)