CSS z-index Property

CSS z-index property specifies the stack order of a positioned element.

CSS z-index property set a overlap value and base on overlap value to element positioning set from each other.

CSS z-index property always work with absolute as well as relative positioning value.

Usages

The following table outline the usages and version history of this property.

Default value: auto
Applies to: Positioned elements
Inherited: No
Version: CSS2
JavaScript Syntax: object.style.zIndex = "-2"

Syntax

Here is a syntax for the CSS z-index property

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

Property Values

The following table describes the values of this property.

Value Description
integer Sets the stack level of the element in the current stacking context
auto Default. The stack level of the element is the same as its parent box
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets z-index property.

<div style="background-color:orange;
  width:130px;
  height:150px;
  top:15px;
  left:100px; 
  position:relative;
  z-index:1;">
</div>
<div style="background-color:#FF3333;
  width:130px;
  height:150px;
  position:relative;
  top:-30px;
  left:45px;
  z-index:2;">
</div>
<div style="background-color:#CCFF66;
  width:230px;
  height:70px;
  position:relative;
  top:-270px;
  left:145px;
  z-index:3;">
</div>

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 3+
  • Internet Explorer 4+
  • Opera 4+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.