Concept

z-index is a CSS property used to change the display priority of an object on the screen.

How to use

Example

HTML

<div class='result'>
  <span class='box1'>1</span>
  <span class='box2'>2</span>
</div>

CSS

.result {
  position : relative;
  height: 200px;
  background: lightcoral !important;
}

.result .box1 {
  background: pink;
  position: absolute;
  width: 50px;
  height: 50px;
  left: 30px;
  top: 30px;
  z-index: 1;
}

.result .box2 {
  background: red;
  position: absolute;
  width: 50px;
  height: 50px;
  left: 40px;
  top: 40px;
  z-index: 2;
}

Result