Position Property
Last updated: 2026-09-13
position Position Property
The position property specifies how an element is positioned, whether it stays in the document flow or is offset relative to some reference point. Combined with the top, right, bottom, and left properties, it enables relative, absolute, fixed, and sticky positioning for common layout effects.
| Category | |
|---|---|
| Initial Value | static |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
position: static | relative | absolute | fixed | sticky;⚙️ Values
| Value | Type | Description |
|---|---|---|
static | relative | absolute | fixed | sticky | Keyword | Positioning type: static/relative/absolute/fixed/sticky. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| position | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： An absolute element is positioned relative to its nearest non-static ancestor, so you usually need to give the parent position:relative as the positioning reference.
Warning： A fixed element is positioned relative to the viewport; mobile browsers vary in their support, which can cause jitter or misplacement in some cases.
❓ FAQ
QWhat's the difference between absolute and relative?
AA relative element stays in the document flow, so offsets like top and left move it from its original spot while its original space is preserved. An absolute element is taken out of the flow, takes no space, and is positioned relative to its nearest positioned, non-static ancestor; if none exists, it positions relative to the viewport. Mnemonic: relative moves the element and keeps its place; absolute leaves the flow and anchors to an ancestor.
QHow are sticky and fixed different?
Afixed always positions relative to the viewport and stays put while scrolling, out of the flow. sticky combines relative and fixed: before crossing a scroll threshold it behaves like relative and scrolls with the content; past the threshold it sticks like fixed, but only within its parent's bounds. sticky requires a threshold such as top, and its parent must not have overflow:hidden.
QWhat is position:absolute positioned relative to?
AAn absolute element is positioned relative to the padding box of its nearest positioned ancestor, that is, an element whose position is not static. If all ancestors are static, it falls back to the initial containing block, usually the viewport. That is why the common pattern is to give the parent position:relative as the positioning context, so a child's absolute offsets are computed against the parent container.
QWhy isn't position:sticky working?
ACommon causes: first, the parent container is not tall enough, leaving no room to scroll; second, the parent or an ancestor sets overflow:hidden, auto, or scroll, which breaks sticky; third, no threshold like top or bottom is set; fourth, the element sits inside a container that cannot scroll. Check these one by one, paying special attention to overflow on ancestors.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
top / right / bottom / left
Offset properties used with position.
z-index (Stacking Order)
Control the stacking order of positioned elements.
