The z-index property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

  • Initial valueauto
  • Applies toPositioned elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableYes
  • CSS VersionCSS2, CSS3
  • JavaScript
Formal syntax: auto | <integer>

z-index: 5;
z-index: auto;
  • <integer>Integer that specifies the position of the object in the stacking order. The value is arbitrary and may be negative, zero, or positive.
  • autoSpecifies the stacking order of the positioned objects based on the top-down order in which the objects appear in the HTML source.
  • inherit
.class {
   display: block;
   position: absolute;
   margin: 50px;
   z-index: 3;

Click the button below to experiment with this property.

Give it a Try!


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.