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.




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