CSS z-index

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.



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
.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;

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


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



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.

1.0 Dec 2008
3.0 Jun 2008
4.0 Sep 1997
4.0 Jun 2000
1.0 Jun 2003

You may also like

Last updated on Sep 30, 2023