Position
The position property controls how an element is placed in relation to normal flow, ancestors, and the viewport. It powers overlays, sticky headers, anchored UI, and many small layout adjustments.
Overview
The position property controls how an element is placed in relation to normal flow, ancestors, and the viewport. It powers overlays, sticky headers, anchored UI, and many small layout adjustments.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.header {
position: sticky;
top: 0;
}
.modal {
position: fixed;
inset: 0;
}Live demo
Use cases
Sticky navigation
Use position: sticky for headers or side indexes that should remain nearby while the user scrolls.
Badges and overlays
Absolute positioning is effective for notifications, corner badges, and small overlay affordances.
Cautions
- Absolute and fixed positioning can overlap content at zoomed sizes or small viewports if spacing is not carefully managed.
- Positioning tricks should not be used to create a visual order that contradicts the source order.
Accessibility
- Sticky or fixed UI must not cover focused elements or essential content, especially on smaller screens and at high zoom.
Related links
Powered by web-features