Q8: How do static, relative, absolute, fixed, and sticky positioning modes work?
static: Default document flow.relative: Shifted relative to normal flow position without affecting neighboring layout.absolute: Positioned relative to nearest non-static positioned ancestor.fixed: Positioned relative to the viewport window.sticky: Switches between relative and fixed based on user scroll position thresholds.
Sticky Navigation Header
.header {
position: sticky;
top: 0;
background: white;
z-index: 1000;
}💡 Sticky switches from relative flow to fixed positioning when scrolling hits top: 0 boundary.
Key Takeaways
absolutealigns relative to nearest non-static positioned ancestor.stickyanchors elements relative to scroll container bounds.
Knowledge Check
Against what reference frame does an element with position: absolute position itself?