CSS z-index


The CSS z-index property is used to specify the stack order of an element. It is used to arrange elements on top of each other.

If elements are positioned not in their browser default position, they can tend to overlap in which case the z-index is useful to set which element is given preference to show in the front or behind.


Here's an example:


.img1 {
  position: absolute;
  z-index: 2;
  margin:4px 0px 4px 4px;
}
.img2 {
  position: absolute;
  z-index: 1;
  margin:4px 0px 4px 4px;
}
Live Demo!


Output:


In the above example, image with the red flowers has the img1 class. Due to higher z-index, it's appearing over the other image.

z-index only works on elements that have some custom positioned applied. It also works on flex item (Items inside a flex box)