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
z-index: auto | number | initial | inherit;Example
x
<html><head><style> img { position: absolute; left: 0; top: 25px; z-index: -1; }</style></head><body><img src="https://webtutor.dev/images/webtutor.jpg" width="150" height="150"><p>Because the image has a z-index of -1, it will be placed behind the heading.</p></body></html>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 |