L布局 CSS - thuộc tính z-index

z-index thuộc tính xác định thứ tự chồng của phần tử.

Thuộc tính z-index

Khi phần tử được định vị, chúng có thể bị trùng lấp với các phần tử khác.

z-index thuộc tính xác định thứ tự chồng của phần tử (phần tử nào nên đặt trước, phần tử nào nên đặt sau).

thứ tự chồng của phần tử có thể là số dương hoặc số âm:

Đây là một tiêu đề

vì hình ảnh của z-index để -1, vì vậy nó sẽ được đặt ở sau văn bản.

thực例

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Thử ngay

Lưu ý:z-index chỉ áp dụng chophần tử định vị（position: absolute、position: relative、position: fixed hoặc position: sticky）vàthành phần弹性（display: flex thành phần trực tiếp của phần tử).

Một ví dụ về z-index khác

thực例

Ở đây, chúng ta thấy phần tử có thứ tự chồng cao hơn luôn luôn nằm trên phần tử có thứ tự chồng thấp hơn:

<html>
<head>
<style>
.container {
  position: relative;
}
.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Hộp đen</div>
  <div class="gray-box">Hộp xám</div>
  <div class="green-box">Hộp xanh</div>
</div>
</body>
</html>

Thử ngay

không z-index

Nếu hai phần tử định vị không chỉ định z-index trong trường hợp trùng lấpHTML mã cuối cùng được định nghĩathiết bị sẽ hiển thị ở trên cùng.

thực例

Cùng với ví dụ trên, nhưng ở đây không chỉ định z-index：

<html>
<head>
<style>
.container {
  position: relative;
}
.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Hộp đen</div>
  <div class="gray-box">Hộp xám</div>
  <div class="green-box">Hộp xanh</div>
</div>
</body>
</html>

Thử ngay

Thuộc tính CSS

Thuộc tính Mô tả
z-index Đặt thứ tự chồng lên của yếu tố.