CSS z-index Property

The z-index property defines the element‘s vertical stack order.

With overlapping elements, those with the highest value display in front.

And those with lower values display behind the other elements.

Example

#

The transparent overlay with text displays in front of the painting because it has a higher z-index.

The Card Players, by Paul C├ęzanne
<style>
.art { position: relative; }

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(255,255,255,0.8);
  padding: 10px;
  width: 300px;
  text-align: center;
  font-weight: bold;
  color: #765;
  z-index: 100;
}
</style>

<div class="art">
  <img src="/img/css/cardplayers.jpg">
  <div class="overlay">The Card Players, by Paul Cézanne</div>
</div>

Using z-index

The z-index property only works on positioned elements -- except for static.

So, elements that participate in the standard page flow are not stackable.

The positioned element with the highest z-index will display in front.

The positioned element with the lowest z-index will display behind the others.

The default value is 0. A value of -1 displays behind all elements without a z-index.

Syntax

z-index: auto | number | initial | inherit;

Values

#

Value Description
auto Default. Inherit parent's z-index value.
number Sets the z-index of the element. Default is 0. Accepts negative values.
initial Sets the z-index to its default value.
inherit Inherit parent's z-index value.

Browser support

This table shows when z-index support started for each browser.

Chrome
1.0 Dec 2008
Firefox
3.0 Jun 2008
IE/Edge
4.0 Sep 1997
Opera
4.0 Jun 2000
Safari
1.0 Jun 2003

You may also like

Guides