position
How an element is positioned: in the normal flow or by offsets.
Syntax
position: value;Values
| Parameter | Type | Description |
|---|---|---|
| static | keyword | In the normal flow; offsets do not work (the default). |
| relative | keyword | Shifted from its normal place, which stays reserved; also a reference point for absolute children. |
| absolute | keyword | Taken out of the flow and placed relative to the nearest positioned ancestor. |
| fixed | keyword | Placed relative to the window and does not scroll with the page. |
| sticky | keyword | Scrolls with the page until it reaches the given offset, then sticks. |
Examples
A badge in the corner of a card — absolute inside relative:
<style>
.card { position: relative; width: 200px; padding: 16px; background: whitesmoke; }
.badge { position: absolute; top: 8px; right: 8px; background: crimson; color: white; padding: 2px 6px; }
</style>
<div class="card">Product card <span class="badge">New</span></div>A sticky header:
<div style="height: 120px; overflow: auto; border: 1px solid gray;">
<h4 style="position: sticky; top: 0; margin: 0; background: gold;">Sticky header</h4>
<p>Scroll this box.</p><p>The header stays at the top.</p><p>More text.</p><p>And more.</p>
</div>Notes
An absolutely positioned element looks for the nearest ancestor with any position other than static; if there is none, it is placed relative to the page. sticky needs an offset like top: 0 and does not work if an ancestor has overflow: hidden.
See also
- top, right, bottom, left — The offsets of a positioned element from the edges of its reference box: top, right, bottom and left.
- z-index — Which positioned element is drawn on top when they overlap.
- margin-inline — Logical properties: sizes and spacing by the direction of the text instead of left, right, top and bottom.
- anchor-name — Names an element as an anchor, so that an absolutely positioned element anywhere on the page can be placed next to it.
Related recipes
- How to add a caption to an image
- How to add a Skip to content link
- How to autoplay a muted video
- How to darken an image under text
- How to hide an element visually but keep it for screen readers
- How to keep a table header fixed while scrolling
- How to make a badge
- How to make a dropdown menu
- How to make a reading progress bar
- How to make a sticky header
- How to make a toast notification
- How to overlap elements
- How to place an element in a corner
- How to position a tooltip next to a button with anchor positioning
In the tutorial
- Positioning — The position property — static, relative, absolute, fixed and sticky, the top, right, bottom, left and inset offsets.