CSS Position Table
| Value | Behaviour | Common use case |
|---|---|---|
| static | Default - element flows normally, top/right/bottom/left are ignored | Regular document flow |
| relative | Offset from its normal position without affecting siblings | Nudging an element; creating a positioning context for absolute children |
| absolute | Removed from flow; positioned relative to nearest positioned ancestor | Overlays, tooltips, dropdown menus |
| fixed | Removed from flow; positioned relative to the viewport (stays on screen when scrolling) | Navigation bars, back-to-top buttons, cookie banners |
| sticky | Scrolls normally until crossing a threshold, then acts like fixed | Sticky headers, sidebar navigation, table headers |
CSS position determines how an element is placed in the document - and each value changes what the top, right, bottom and left properties actually mean. The five values form a spectrum from normal flow (static) to fully detached from the document (fixed).
The killer feature of modern CSS is position: sticky - pure CSS sticky headers and sidebar navigation that used to require JavaScript scroll listeners. But it silently breaks if any ancestor has overflow: hidden, which is the #1 sticky bug report on Stack Overflow.
How to use
- Filter by position value or keyword - fixed, sticky, absolute, z-index - to find what you need.
- Read the behaviour column to understand what each value does to the element and its siblings.
- Use the use-case column as a decision guide: sticky for scroll-following, absolute for overlays, fixed for persistent UI.
Frequently asked questions
What is the difference between absolute and fixed?
Absolute positions relative to the nearest positioned ancestor (one with position other than static) - it scrolls with the page. Fixed positions relative to the viewport itself - it stays on screen when you scroll. A modal overlay uses fixed; a tooltip next to a button uses absolute.
Why is my position: sticky not working?
The most common cause: a parent element with overflow: hidden, overflow: auto or overflow: scroll between the sticky element and the viewport. The sticky element sticks within its scrolling container, so if the container itself doesn’t scroll, the element has nothing to stick against. Remove the overflow property or set it to overflow: visible.
How does z-index relate to position?
z-index only works on elements with position other than static. Without positioning, z-index is ignored entirely. Elements with the same z-index stack in DOM order (later elements on top). Create a stacking context with position + z-index, or use isolation: isolate to contain stacking within a subtree.
What is the difference between relative and absolute positioning?
Relative offsets the element from its normal position while still occupying space in the flow - siblings are not affected. Absolute removes the element from the flow entirely - siblings close the gap as if it were not there. Relative also creates a positioning context for absolutely positioned children inside it.