Chồng lớp phần tử với thuộc tính z-index trong CSS

Thuộc tính z-index trong CSS cho phép các nhà phát triển chồng các phần tử lên nhau. Giá trị của z-index có thể là số dương hoặc số âm.

LƯU Ý: Nếu các phần tử chồng lên nhau không có z-index được chỉ định, thì phần tử xuất hiện sau cùng trong tài liệu HTML sẽ hiển thị trên cùng.

Ví dụ 1: Sử dụng background-image và box-shadow

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    background: url("https://www.tutorialspoint.com/arangodb/images/arangodb.jpg");
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 3px black;
    padding: 20px;
    background-origin: border-box;
  }
</style>
</head>
<body>
  <h2>ArangoDB</h2>
  <p>ArangoDB được ca ngợi là một cơ sở dữ liệu đa mô hình gốc (native multi-model database) bởi các nhà phát triển của nó. Điều này khác với các cơ sở dữ liệu NoSQL khác. Trong cơ sở dữ liệu này, dữ liệu có thể được lưu trữ dưới dạng tài liệu, cặp khóa/giá trị hoặc đồ thị. Là một cơ sở dữ liệu đa mô hình gốc, ArangoDB loại bỏ nhu cầu triển khai nhiều cơ sở dữ liệu, từ đó giảm số lượng thành phần và bảo trì của chúng. Do đó, nó giảm độ phức tạp của technology-stack cho ứng dụng. Ngoài việc hợp nhất các nhu cầu kỹ thuật tổng thể, sự đơn giản hóa này dẫn đến tổng chi phí sở hữu thấp hơn và tăng tính linh hoạt.</p>
</body>
</html>

Kết quả

Ví dụ 2: Chồng nhiều div với z-index âm

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  div {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  div:first-child {
    background-color: orange;
    width: 270px;
    height: 120px;
    z-index: -2;
  }
  div:last-child {
    width: 250px;
    height: 100px;
    z-index: -1;
    background-color: turquoise;
  }
</style>
</head>
<body>
  <div></div>
  <p>Variables are the reserved memory locations to store values. This means that when you create a variable you reserve some space in memory.............</p>
  <div></div>
</body>
</html>

Kết quả

Mẹo: z-index chỉ hoạt động trên các phần tử có position là relative, absolute, fixed, hoặc sticky. Phần tử con có z-index cao hơn sẽ hiển thị trên phần tử cha nếu cả hai đều được định vị.