Physical properties
The physical CSS properties, top, right, bottom, and left, set the inset position of an element relative to the corresponding side of a container determined by the element's position property.
Overview
The physical CSS properties, top, right, bottom, and left, set the inset position of an element relative to the corresponding side of a container determined by the element's position property.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The left CSS property participates in specifying the horizontal position of a positioned element. This inset properties has no effect on non-positioned elements. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The right CSS property participates in specifying the horizontal position of a positioned element. This inset properties has no effect on non-positioned elements. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The top CSS property sets the vertical position of a positioned element. This inset properties has no effect on non-positioned elements. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
Syntax
.tooltip {
position: absolute;
top: 100%;
left: 50%;
}Live demo
Use cases
Using Physical properties
The physical CSS properties, top, right, bottom, and left, set the inset position of an element relative to the corresponding side of a container determined by the element's position property.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features