value: auto | <integer> | inherit
initial value: auto
inherited: no
percentages: N/A
applicable to: any element with a position property applied of relative, fixed or absolute

The z-index property determines if one element is to sit above or below another element if they are placed in the same location on the web page. In order for the z-index to be applied, the element must have the position property applied as relative, fixed or absolute. The default position value is static, a state on which that the z-index has no bearing.

Visit the CSS Property: position page to find out more about these values.

The value for the z-index property needs to be a whole number, an integer, no decimals. The z-index property can have a negative value. The higher the z-index value the higher the element sits in the stacking order.

The normal layout for an HTML page has the elements stacking in the same plane, not sitting on top or below. With positioned elements, or elements with a negative margin, or set pixel width, etc., there may be an overlap of two or more elements. If no z-index is assigned, the elements that are introduced later in the HTML document will be placed above the earlier elements. Using the z-index property allows you to change this standard stacking order.


div.sitsontop {position: relative; z-index: 10;}
div.sitsbelow {position: relative; z-index: 5;}

<div class="sitsbelow">This box will sit below the other box.

<div class="sitsontop">
This box will sit above the other box.