Trong CSS, thuộc tính z-index được sử dụng để kiểm soát thứ tự xếp chồng của các phần tử được định vị. Các phần tử có giá trị z-index cao hơn sẽ được đặt trước các phần tử có giá trị z-index thấp hơn. Thuộc tính này đặc biệt hữu ích khi bạn có các thành phần chồng chéo trên một trang web và bạn muốn kiểm soát thứ tự chúng xuất hiện.

Dưới đây là thông tin tổng quan cơ bản về cách sử dụng thuộc tính z-index :

Cú pháp:

 css
 selector {
  z-index: value;
}

Ví dụ:

 html
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .element1 {
      position: absolute;
      top: 50px;
      left: 50px;
      background-color: red;
      width: 100px;
      height: 100px;
      z-index: 2;
    }

    .element2 {
      position: absolute;
      top: 70px;
      left: 70px;
      background-color: blue;
      width: 100px;
      height: 100px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="element1"></div>
  <div class="element2"></div>
</body>
</html>

Trong ví dụ này, chúng ta có hai phần tử được định vị tuyệt đối ( element1 và element2 ). Thuộc tính z-index được sử dụng để kiểm soát thứ tự xếp chồng của chúng. Ô màu đỏ ( element1 ) có z-index cao hơn ô xanh lam ( element2 ) nên sẽ xuất hiện trước ô xanh lam.

Hãy ghi nhớ một số điểm chính:

z-index chỉ hoạt động trên các phần tử được định vị (các phần tử có giá trị position khác static ).
z-index giá trị có thể là số nguyên dương, số âm và thậm chí cả số thập phân.
Bối cảnh xếp chồng rất quan trọng khi làm việc với z-index . Phần tử có z-index cao hơn có thể không xuất hiện ở phía trước nếu nó không nằm trong cùng bối cảnh xếp chồng với các phần tử khác. Hiểu bối cảnh xếp chồng là quan trọng đối với bố cục phức tạp hơn.

Vui lòng sửa đổi các giá trị và thử nghiệm để xem z-index ảnh hưởng như thế nào đến thứ tự sắp xếp các phần tử.