position
The position property sets how an element is positioned in the document using the inset properties.
Syntax
position: static | relative | absolute | fixed | sticky;
Examples
.bar { position: sticky; top: 0; }
.badge { position: absolute; top: 8px; right: 8px; }
.modal { position: fixed; inset: 0; }
Output
Pins .bar to the top while scrolling, places .badge in a positioned ancestor's corner, and stretches .modal over the full viewport.
Notes
absolute and fixed remove the element from normal flow; absolute is relative to the nearest positioned ancestor. sticky toggles between relative and fixed within its scroll container and needs at least one inset value.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |