z-index

< css‎ | properties
Jump to: navigation, search

z-index

This article is Almost Ready.


W3C Recommendation

Summary

The z-index property controls the stacking order of elements. As the x-axis defines the horizontal (left-right) position of elements on the screen, and the y-axis defines the vertical (top-down) position, think of the z-axis as the third dimension or depth-of-field, rising "out of" the screen toward you or descending "into" the screen away from you. The z-index property controls that dimension, stacking (layering) elements above or below others; thus. elements with a higher z-index appear closer to the viewer overlapping other elements in the same space, whereas those with a lower z-index appear further away or behind other elements occupying the same space on the cartesian plane. Different browsers have different interpretations of z-index ordering, so beware.

Overview table

Initial value auto
Applies to Positioned elements
Inherited No
Media visual
Computed value As specified
Animatable Yes
CSS Object Model Property
Percentages N/A

Syntax

  • z-index: <integer>
  • z-index: auto
  • z-index: inherit


Values

auto
Default. Specifies the stacking order of the positioned objects based on the top-down order in which the objects appear in the HTML source.
<integer>
Integer that specifies the position of the object in the stacking order. The value is arbitrary and may be negative, zero, or positive.
inherit
Takes the same specified value as the property for the element's parent.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.0
Yes
4.0
Yes
4.0
Yes
1.0
Yes
Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec)
1.0
Yes
?
Unknown
4.0
Yes
4.0
Yes
1.0
Yes

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown


Examples

View live exampleThe following example demonstrates the z-index property set to auto. Some style rules have been omitted for brevity. Please see the live example to view all the style rules.

CSS

.box {
  /**
   * The elements with the class `.box` are positioned absolutely
   * so as to make them overlap on each other. This helps demonstrate
   * the z-index property easily.
   */
  position: absolute;
  /**
   * The stacking order (z-index) is set to auto. Thus, the elements
   * stack in the order in which they appear in the DOM.
   */
  z-index: auto;
}

/* We offset the elements a little so the stacking order is easily seen. */
.bottom {
  top: 50px;
  left: 50px;
}

.middle {
  top: 100px;
  left: 60px;
}

.top {
  top: 150px;
  left: 70px;
}

HTML

<div class="container">
    <div class="box bottom">This box is at the bottom with z-index set to auto.</div>
    <div class="box middle">This box is in the middle with z-index set to auto.</div>
    <div class="box top">This box is at the top with z-index set to auto.</div>
</div>

View live exampleThe following example demonstrates the z-index property set to an integer. Some style rules have been omitted for brevity. Please see the live example to view all the style rules.

CSS

.box {
  /**
   * The elements with the class `.box` are positioned absolutely
   * so as to make them overlap on each other. This helps demonstrate
   * the z-index property easily.
   */
  position: absolute;
}

/* We offset the elements a little so the stacking order is easily seen. */
.bottom {
  top: 10px;
  left: 50px;
  /**
   * The stacking order position of this element is 10.
   */
  z-index: 10;
}

.middle-level-one {
  top: 60px;
  left: 60px;
  /**
   * The stacking order position of this element is greater than
   * that of `div.bottom`, thus this element will appear above `div.bottom`.
   */
  z-index: 20;
}

.middle-level-two {
  top: 120px;
  left: 70px;
  /**
   * The stacking order of this element is same as that of `div.middle-level-one`.
   * Thus, these two elements will follow DOM order.
   */
  z-index: 20;
}

.top {
  top: 180px;
  left: 80px;
  /**
   * The stacking order of this element is greater than all the other elements.
   * Thus this element will appear above all of them.
   */
  z-index: 30;
}

HTML

<div class="container">
    <div class="box top">This box is at the top with z-index set to 30.</div>
    <div class="box middle-level-one">This box is in the middle level 1 with z-index set to 20.</div>
    <div class="box middle-level-two">This box is in at middle level 2 with z-index set to 20.</div>    
    <div class="box bottom">This box is at the bottom with z-index set to 10.</div>
</div>

View live exampleThe following example demonstrates the z-index property set to inherit. Some style rules have been omitted for brevity. Please see the live example to view all the style rules.

CSS

.box {
  /**
   * The elements with the class `.box` are positioned absolutely
   * so as to make them overlap on each other. This helps demonstrate
   * the z-index property easily.
   */
  position: absolute;
}

/* We offset the elements a little so the stacking order is easily seen. */
.bottom {
  top: 10px;
  left: 50px;
  /**
   * The stacking order position of this element is 10.
   */
  z-index: 10;
}

.middle {
  top: 60px;
  left: 60px;
  /**
   * The stacking order position of this element is greater than
   * that of `div.bottom`, thus this element will appear above `div.bottom`.
   */
  z-index: 20;
}

.middle-child {
  /**
   * The stacking order of this element is inherited from its parent, `div.middle`.
   * Thus, this will have the same stacking order as its parent.
   */
  z-index: inherit;
}

.top {
  top: 130px;
  left: 80px;
  /**
   * The stacking order of this element is greater than all the other elements.
   * Thus this element will appear above all of them.
   */
  z-index: 30;
}

HTML

<div class="container">
  <div class="box top">This box is at the top with z-index set to 30.</div>
  <div class="box middle">
    <div class="box middle-child">This box is the child of <code>div.middle</code> with z-index set to inherit.</div>
  </div>
  <div class="box bottom">This box is at the bottom with z-index set to 10.</div>
</div>

Usage

This property only works with elements that are positioned absolute, relative, or fixed.

Notes

If two objects have the same z-index, they are stacked according to their source order.

An element with a positive z-index will be placed above an element that does not have a defined z-index. An element with a negative z-index will be placed below an element with no defined z-index.

The property does not apply to windowed controls, such as select objects.

When elements overlap, only the topmost element can receive action from a pointing device such as a mouse, even if it has a set opacity or is made invisible through CSS. This is also true for positioned elements with a negative z-index, unless:

  • the parent is a scrolling container (that is, its overflow property is set to auto or scroll), or
  • the parent is positioned (that is, its position property is set to absolute, relative, or fixed).

Syntax

z-index: auto | integer | inherit

Related specifications

Specification Status Related Changes
Visual formatting model Recommendation

See also

External resources

Related pages (MSDN)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article