B.131. z-index

For any element for which the position property is other than static, this property sets the stacking order relative to other positioned elements within the same stacking context^[17].

^[17] The stacking context of any element is the closest positioned ancestor whose z-index property is set.

Non-positioned elements are always beneath all positioned elements in the same stacking context; they effectively have a z-index of 0. Elements in the same stacking context with the same z-index are stacked in the order they appear in the document, with later elements overlaying earlier ones.

Inherited: No

See also: Section B.90position

B.131.1. Value

A positive integer, or the auto constant. The higher the integer, the higher the element's position in the stacking order.

The auto constant causes the element to behave as if it had a z-index of 0, except that it does not create a new stacking context.

Initial value: auto

B.131.2. Compatibility

CSS Version: 2

This property works in all CSS-compatible browsers, including Netscape 4.

B.131.3. Example

This style rule positions the element with ID mainmenu near the top-left of the browser window and with a z-index value that causes it to hover over other elements of lower z-index values:

#mainmenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 300px;
  z-index: 10;
}