Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

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

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

Guides