z-index

z-index Description:

The z-index property defines the stack level of the box in the current context, and whether there is a local stacking context.

z-index in CSS Versions:

• CSS 2
• CSS 3

z-index Syntax:

z-index: auto | <integer> | inherit

• auto
  The stack level is the same as its parent's stack level. No new local stacking context.
• <integer>
  The stack level of the generated box in the current stacking context. It is 0 in the local stacking context.
• inherit
  The element should have the same z-index value as the parent element.

z-index Initial Value:

auto

z-index Applies To:

All positioned elements.

z-index Inheritance:

This property is not inherited.

z-index Browser Support:

• Netscape 6, 7
• Mozilla 1
• Firefox 1
• Internet Explorer 4, 5, 6
• Opera 3, 4, 5, 6, 7, 8
• Safari 1

z-index Media Type:

• Visual

z-index Examples:

Standard z-index property

<p style="z-index:100;">
This paragraph will be above any element that has a z-index of 99 or lower.
</p>

z-index Special Notes:

• The z-index will only work if the position property is set as well.

More z-index Information

• position
• Z-Index in CSS
• CSS Positioning

Return to the Style Library