Widely available Appropriate for persistent utility UI, but it should be used sparingly and tested carefully at small sizes.

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.

LayoutPositioningViewport

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

Lockheader style

CSS Lockheader style demo.

PreviewFullscreen

Fabbutton style

CSS FABbutton style demo.

PreviewFullscreen

toastnotification style

CSS toastnotification style demo.

PreviewFullscreen

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