CSS Z-INDEX

Positioning of elements in CSS occurs in three dimensions, not just two. The third dimension is perpendicular to the screen, giving the screen a sense of depth. Elements can be overlapped, with “higher”, or “closer” elements obscuring elements that are “lower” or “farther away” (element transparency becomes an important issue with this capability.) The placement of elements along this third ‘z-axis’ is exactly what this property controls.

Each element’s rendering box is automatically assigned an integer z-index stacking level based on its context in the document. Boxes with greater z-axis numbers will appear in front of boxes with lower z-axis numbers (’0′ and negative numbers are allowed.)

Explicitly setting the ‘z-index’ property for an element box not only sets its z-position relative to other element boxes in its current context, it also initiates a new stacking context hierarchy, in which the current element box and its child elements partake.

If two or more boxes have the same stacking level within the same context, they are rendered back to front in the order of the document tree. If no ‘z-index’ property is set for an element box, it inherits the stacking level of its parent element box.

Example
1
2
3
4
5
6
7
8
9
h2 {
  display: block;
  position: absolute;
  top: 20px;
  right: 50px;
  bottom: 20px;
  left: 50px;
  z-index: 3
}
1
2
3
4
<h2 style="display: block; position: absolute; top: 20px;
  right: 50px; bottom: 20px; left: 50px; z-index: 3;">
    content
</h2>

Possible Values

inherit: Explicitly sets the value of this property to that of the parent.

auto: The stack level of the current element’s box in the current context is the same as that of its parent’s. A new local stacking context is not created.

[integer]: This indicates the stack level of the current element’s box in the current context. A new local stacking context is created by the current element, with its stack level being 0. Positive and negative integers are allowed.