freeCodeCamp/guide/english/css/z-index/index.md

title

title
Z Index

Z Index

Z Index (z-index) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index.

Note: Z index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Possible Values

/* Default value if not specified */
z-index: auto;

/* Integer values */
z-index: 1;
z-index: 100;
z-index: 9999;
z-index: -1;

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

Example Usage

In this example, you can see three boxes displayed on top of each other in different orders using z-index.

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;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

Since z-index wasn't defined, it will have a default value of auto. This is a result:

Try to change the order to Green, Blue, Red in CSS using z-index.

#blue {
  background-color: blue;
  z-index: 2;
}

#red {
  background-color: red;
  z-index: 1;
}

#green {
  background-color: green;
  z-index: 3;
}

Your result will be:

Use Z Index if you need to put a background element below a container. You can easily place the background under every element by giving it a negative Z Index like below:

#background {
  z-index: -1;
}

More Information:

https://css-tricks.com/almanac/properties/z/z-index/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

https://medium.freecodecamp.org/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3