CSS
Positioning in CSS: Absolute, Relative, Fixed, and Sticky
Positioning can be one of the most confusing aspects of CSS. The default is static, which means elements flow in the normal document order. Relative is a subtle shift: position: relative; top: 10px; moves the element down 10px from where it would have been, but the original space is still reserved. Absolute is the wildcard. It removes the element from the document flow. It positions itself relative to the nearest positioned ancestor (any ancestor with a position other than static). If none exists, it goes to the <html> element. Fixed is similar to absolute, but it positions relative to the viewport, making it perfect for sticky headers that stay at the top even when scrolling. Sticky is a hybrid: it acts like relative until you scroll past a threshold, then it becomes fixed. I use sticky for table headers and sidebars constantly.
2,269
Views
141
Words
1 min read
Read Time
May 2025
Published
