CSS z-index Property
In CSS, the z-index property governs the vertical stacking order of elements that overlap. In other words, which one appears to be physically closer to you. The z-index only affects elements with non-static position values (the default).
Elements can overlap for a variety of reasons, such as relative positioning, which has nudged one element over another. A negative margin has pushed one element ahead of another. Elements that are perfectly positioned overlap.
Syntax
Property Values
| Value | Description |
|---|---|
| auto | Sets the stack order to the same as its parents. This is the default setting. |
| number | Sets the element's stack order. Negative numbers are permitted. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| z-index | 1.0 | 3.0 | 1.0 | 4.0 | 4.0 |