Khái niệm

z-index là một thuộc tính trong CSS dùng để thay đổi độ ưu tiên hiển thị của đối tượng trên màn hình.

Cách sử dụng

ví dụ

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

Kết quả