Fixed positioning
Fixed positioning anchors an element to the viewport rather than the document flow. It is commonly used for persistent headers, floating actions, and global banners.
Overview
Fixed positioning anchors an element to the viewport rather than the document flow. It is commonly used for persistent headers, floating actions, and global banners.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.position.fixed | 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)
Notes 1 item(s)
Implementation note
- Before Firefox 44, `position: fixed` didn't create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari's long-time behavior.
Syntax
CSS
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}Live demo
Use cases
Persistent notices
Keep urgent notices or consent banners visible while the user scrolls.
Floating actions
Add return-to-top buttons or compact utility controls that stay available across the page.
Cautions
- Fixed UI can obscure content when the viewport is small or zoomed.
- Persistent overlays should not stack until the usable reading area becomes cramped.
Accessibility
- Fixed controls need clear dismissal or enough spacing so they do not trap content behind them.
Related links
Powered by web-features