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.
Overview
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.
Related links
Powered by web-features