sticky-and-fixed-elementslisted

# Sticky and Fixed Elements ## position: fixed vs position: sticky | Property | Behaviour | Use for | |---|---|---| | `position: fixed` | Removed from document flow. Always stays at the same viewport position regardless of scroll or parent. | Global navigation header, bottom toolbar, floating action button | | `position: sticky` | Stays in document flow until it hits its scroll threshold, then locks in place. Returns to flow when parent scrolls past. | Table column headers, section headings in a long list, in-page toolbars within a scroll container | **Prefer `sticky` over `fixed`** when the element belongs to a specific section or scroll context. Fixed elements sit above everything and affect the entire viewport — use them only for truly global UI. ## Top — Navigation Header The global navigation header is the most common fixed element. It should: - Remain visible at all times so the user can always navigate away - Be as thin as possible to maximise content area — 48–64px is a common range - Have a background and shadow so content scrolling beneath it does not bleed through - On scroll, a subtle shadow (`--shadow-sm`) signals that content is behind it ```css .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--color-surface); box-shadow: var(--shadow-sm); z-index: var(--z-header); } ``` Compensate for the fixed header with matching top padding on the page body: ```css body { padding-top: var(--head