Widely available Fundamental and widely used, but it should be applied with care because it can easily separate visual layout from document flow.

Position

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left physical properties and the inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end flow-relative logical properties can be used to determine the final location of positioned elements.

LayoutPositioning

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
position
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

position: relative

CSS Position: relative demo.

PreviewFullscreen

position: absolute

CSS Position: absolute demo.

PreviewFullscreen

position: sticky

CSS Position: sticky demo.

PreviewFullscreen

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