Absolute positioning
Absolute positioning removes an element from normal flow and positions it relative to a containing block. It is useful for overlays, badges, and anchored visual details.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.align-self.position_absolute_context | 122 | 122 | 134 | 26 | 122 | 26 |
| CSS property | ||||||
position absolute context Supported for absolutely-positioned boxes | 122 | 122 | 134 | 26 | 122 | 26 |
position absolute context Supported for absolutely-positioned boxes | 122 | 122 | 134 | 26 | 122 | 26 |
absolute | 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)
Notes 2 item(s)
Implementation note
- Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have `border-collapse` applied to them (bug 1379306).
- Before Firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).
Syntax
CSS
.tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}Live demo
Use cases
-
Badges and indicators
Attach notification dots, corner labels, or small affordances to another element without affecting surrounding flow.
-
Anchored overlay details
Place tooltips, helper callouts, or decorative layers in relation to a local container.
Cautions
- Absolute elements can overlap or disappear outside their container if spacing and containment are not planned carefully.
- Heavy use of absolute positioning often signals a layout that would be clearer with Grid or Flexbox.
Accessibility
- Visual placement should not hide the real reading order or cover important interactive content.