Little Web Hut

CSS 2.1 Reference: z-index Property

CSS z-index Property
Syntax
selector {z-index: value;}
  • value is specified by using an integer or one of the following keywords: auto or inherit.
Usage

The z-index property is used to set the element's stacking order. If multiple element boxes overlap then the value of this property is used to determine which one is displayed on top. Element boxes with higher z-index numbers are displayed on top of element boxes with lower z-index numbers.

This property is specified by using an integer or keyword according to the syntax shown above.


CSS Example: The z-index properties are set for 3 different overlapping images which are absolutely positioned.
  #tst1 {z-index: 3; position: absolute; top: 0px; left: 200px;}
  #tst2 {z-index: 4; position: absolute; top: 40px; left: 240px;}
  #tst3 {z-index: 2; position: absolute; top: 20px; left: 280px;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • auto - The stack level is 0.
  • inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.
Applies To Elements that have a position property value of relative, absolute, or fixed.
Inherited No
Initial Value auto


z-index Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe z-index properties are set for 3 different overlapping images which are absolutely positioned.