z-index
The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one.
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 |
negative values Negative values | 1 | 12 | 3 | 1 | 18 | 1 |
| Other | ||||||
| The CSS data type is a special type of number that represents a positive or negative whole number. Integers can be used in numerous CSS properties and descriptors, such as the column-count, counter-increment, grid-column, grid-row, and z-index properties and the @counter-style/range descriptor. | 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
.dropdown { z-index: 100; }
.modal-backdrop { z-index: 999; }
.modal { z-index: 1000; }
.tooltip { z-index: 1100; }Live demo
Use cases
-
Using z-index
The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.