Question

What is the purpose of z-index in CSS?

I'm trying to understand the purpose of the z-index property in CSS. How does it affect the stacking order of elements on a webpage? When should I use z-index, and are there any common issues I might encounter with it? Any explanations or examples to clarify how it works would be really helpful

Answer 1

The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one.

Possible Values

/* Keyword value */

z-index: auto;

/* <integer> values */

z-index: 0;

z-index: 3;

z-index: 289;

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

/* Global values */

z-index: inherit;

z-index: initial;

z-index: revert;

z-index: revert-layer;

z-index: unset;

Let’s take a basic example:

HTML

<div class="container">

  <div class="box" id="blue"></div>

  <div class="box" id="red"></div>

  <div class="box" id="green"></div>

</div>

CSS

#blue {

  background-color: blue;

  z-index: 2;

}


#red {

  background-color: red;

  z-index: 1;

}


#green {

  background-color: green;

  z-index: 3;

}