CSS z-index Property

The z-index property is used to specify the z-order of a positioned element and its descendants. When different elements are overlapping this z-order value will determine which one will cover the other. For someone looking at the screen, an element with a larger z-index generally covers an element with a lower one.

For a positioned box (that is, one with any position other than static), the z-index property specifies the stack level of the box in the current stacking context and whether or not the box establishes a local stacking context.

The initial value of z-index property is auto. You can only apply it to positioned elements. This property is not inheritable. The final computed value of the z-index property is the exact same value that you initially supplied. This property is animatable an integer.

Syntax

This is the formal syntax for using z-index property.

z-index: auto | <integer> | inherit

Here are some examples of using this property.

/* Keyword value */
z-index: auto;


/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;

/* Negative values to lower the priority */
z-index: -1;

/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;

Acceptable Values

<integer>

This value means that the given integer is the stack level (order) of the element in the current stacking context. The element also establishes a local stacking context in which its stack level is 0. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

auto

This value means that the stack level (order) of the element in the current stacking context is 0. The element does not establish a new stacking context unless it is the root element.

Working Examples

Consider the following markup:

<div class="red-box">
  <span class="orange-box"></span>
  <span class="blue-box"></span>
</div>

Without a z-index value, the blue box will be drawn on top and the red box will be drawn at the bottom. Now, let’s say you applied the following CSS to the boxes:

.red-box {
  z-index: 1;
}

.orange-box {
  z-index: 3;
}

.blue-box {
  z-index: -2;
}

This will result in the orange box with the highest z-index value being drawn at the top. You should note that the blue box is still not drawn below the red box even though it had a negative z-index value. This is because the blue box is the descendant of the red box and the z-index of the red box will not be compared to the blue box in order to determine their z-order.

See the Pen CSS z-index Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The z-index property works in all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Further Reading

  1. Read more about the CSS <z-index> property on MDN.
  2. You can also read the CSS <z-index> property on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top