CSS Position Property
Position: Static (Default)
position: static is the default. Elements flow normally in the
document. Top, right, bottom, left have no effect.
Position: Relative
position: relative allows you to move an element from its
normal position using top, right, bottom, left. The original space is
preserved.
Position: Absolute
position: absolute removes the element from normal flow
and positions it relative to its nearest positioned ancestor (or the
viewport if none exists).
Position: Fixed
position: fixed positions the element relative to
the viewport. It stays in place even when scrolling.
Position: Sticky
position: sticky toggles between relative and
fixed based on scroll position. Perfect for sticky headers!
Z-Index (Stacking Order)
The z-index property controls which
elements appear on top. Higher values = closer to
viewer. Only works on positioned elements.
position: absolute to work relative
to a parent, that parent must have
position: relative (or
absolute/fixed).
Summary
static- Default, normal flowrelative- Offset from normal position, space preservedabsolute- Removed from flow, positioned relative to parentfixed- Positioned relative to viewport, stays on scrollsticky- Relative until scroll threshold, then fixedz-index- Controls stacking order (higher = on top)
Quick Quiz
Which position value keeps an element in place when scrolling?
Enjoying these tutorials?