Relative positioning
Relative positioning keeps an element in normal flow while allowing visual offsets from its original position. It also establishes a containing block for absolutely positioned descendants.
Overview
Relative positioning keeps an element in normal flow while allowing visual offsets from its original position. It also establishes a containing block for absolutely positioned descendants.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.position.relative | 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
.badge {
position: relative;
top: -8px;
left: 4px;
}Live demo
Use cases
Minor visual adjustments
Nudge icons, labels, or decorative details without changing the surrounding flow relationships.
Positioning context
Create a local anchor for absolute children such as badges or corner actions.
Cautions
- Large offsets can make the visual position disagree with the space reserved in layout.
- Relative positioning should not become a substitute for better structural layout decisions.
Accessibility
- Small offsets are usually harmless, but major movement can make focus and reading relationships harder to follow.
Related links
Powered by web-features