Chồng chéo phần tử với CSS z-index

Thuộc tính z-index

Thuộc tính z-index kiểm soát thứ tự chồng lớp (stacking order) của các phần tử có position khác static. Giá trị lớn hơn hiển thị trên cùng.

Ví dụ: Đặt hình ảnh sau văn bản

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1; /* Đặt sau nội dung khác */
    }
  </style>
</head>
<body>
  <img src="https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" width="300" height="250">
  <p>Đây là văn bản demo hiển thị đè lên hình ảnh.</p>
</body>
</html>

Hình ảnh có z-index: -1 nên nằm dưới đoạn văn bản (mặc định z-index: auto / 0). Chỉ hoạt động trên phần tử có position: relative | absolute | fixed | sticky.