Ngữ cảnh chồng lấp

2.1 Thuộc tính z-index

Ngữ cảnh chồng lấp trong CSS được quản lý bởi thuộc tính z-index và xác định cách các phần tử chồng lên nhau theo trục Z (tọa độ thứ ba, vuông góc với màn hình). Hiểu và sử dụng đúng z-index và ngữ cảnh chồng lấp cho phép tạo ra các layout phức tạp và động với các phần tử chồng chéo.

Cơ bản về ngữ cảnh chồng lấp

Ngữ cảnh chồng lấp xác định cách các phần tử được hiển thị chồng lên nhau. Mỗi phần tử trên trang web có mức độ chồng lấp, có thể thay đổi thông qua thuộc tính z-index.

Quy tắc chồng lấp

1. Vị trí trong cây tài liệu: các phần tử nằm dưới trong cây tài liệu sẽ chồng lên các phần tử nằm trên.
2. Thuộc tính z-index: phần tử có giá trị z-index lớn hơn sẽ chồng lên phần tử có giá trị z-index nhỏ hơn.

Cơ bản về z-index

Thuộc tính z-index xác định thứ tự chồng lấp của các phần tử khi chúng chồng lên nhau. Phần tử có giá trị z-index lớn hơn sẽ được hiển thị trên phần tử có giá trị nhỏ hơn. z-index chỉ được áp dụng cho các phần tử có định vị (position: relative, absolute, fixed hoặc sticky).

Cú pháp:

    
      .element {
        position: relative; /* hoặc absolute, fixed, sticky */
        z-index: number;
      }
    
  

Nơi mà:

• number: số nguyên có thể là dương hoặc âm. Giá trị càng lớn, phần tử sẽ càng cao trong thứ tự chồng lấp

Ví dụ sử dụng z-index:

Trong ví dụ này, Box 2 với z-index: 2; sẽ được hiển thị trên Box 1 và Box 3, và Box 1 sẽ hiển thị trên Box 3.

    
      .wrapper {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

      .box3 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: green;
      }
    
  

    
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
      </div>
    
  

2.2 Ngữ cảnh chồng lấp (stacking context)

Ngữ cảnh chồng lấp — là một nhóm các phần tử được xem như một toàn thể khi xác định thứ tự chồng lấp. Ngữ cảnh chồng lấp được tạo ra khi thỏa mãn một số điều kiện nhất định, chẳng hạn như áp dụng z-index với định vị hoặc có các thuộc tính CSS khác.

Tạo ngữ cảnh chồng lấp

Ngữ cảnh chồng lấp được tạo ra trong các trường hợp sau:

1. Phần tử có định vị relative, absolute, fixed hoặc sticky và giá trị z-index khác auto.
2. Phần tử có thuộc tính opacity với giá trị nhỏ hơn 1.
3. Phần tử có thuộc tính transform, filter, perspective, clip-path, mask hoặc mask-image, khác với giá trị mặc định.
4. Phần tử có thuộc tính contain với giá trị layout, paint, hoặc strict.

Ví dụ tạo ngữ cảnh chồng lấp:

    
      .parent {
        position: relative;
        z-index: 10;
        min-height: 300px;
        padding: 20px;
        color: white;
        background-color: #f1c40f;
      }

      .child-blue {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 50px;
        min-width: 125px;
        min-height: 125px;
        background-color: #3498db;
      }

      .child-red {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        min-width: 125px;
        min-height: 125px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="parent">
        Phần tử cha
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>
    
  

Giải thích mã:

• .parent: phần tử với position: relative; và z-index: 10;, tạo ra ngữ cảnh chồng lấp mới
• .child-blue: phần tử với position: absolute; và z-index: 1;, nằm trong ngữ cảnh chồng lấp mới, được tạo bởi phần tử cha
• .child-red: phần tử với position: absolute; và z-index: 2;, cũng nằm trong ngữ cảnh chồng lấp mới, được tạo bởi phần tử cha, và sẽ nằm trên .child-blue

2.3 Tương tác giữa các ngữ cảnh chồng lấp

Các phần tử trong một ngữ cảnh chồng lấp không thể chồng lên các phần tử từ ngữ cảnh chồng lấp khác, nếu không thay đổi thứ tự của chính các ngữ cảnh đó. Điều này có nghĩa là các phần tử với z-index cao hơn trong một ngữ cảnh chồng lấp sẽ luôn được hiển thị trên các phần tử với z-index thấp hơn trong cùng ngữ cảnh.

Ví dụ về tương tác giữa các ngữ cảnh chồng lấp:

    
      .wrapper {
        min-height: 500px;
      }

      .container1 {
        position: relative;
        z-index: 10;
        padding: 20px;
        margin-bottom: 200px;
        background-color: lightgrey;
      }

      .container2 {
        position: relative;
        z-index: 20;
        padding: 20px;
        background-color: lightpink;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }
    
  

    
      <div class="wrapper">
        <div class="container1">
          <div class="box box1">Box 1</div>
          <div class="box box2">Box 2</div>
        </div>

        <div class="container2">
          <div class="box box1">Box 3</div>
          <div class="box box2">Box 4</div>
        </div>
      </div>
    
  

Trong ví dụ này, container .container2 với z-index: 20; sẽ được hiển thị trên container .container1 với z-index: 10;. Các phần tử trong mỗi container sẽ được phân bố theo giá trị z-index của chúng, nhưng sẽ không chồng chéo các phần tử từ container khác.

2.4 Giá trị âm của z-index

z-index có thể nhận các giá trị âm, cho phép đặt các phần tử dưới các phần tử với giá trị z-index bằng 0 hoặc dương.

    
      .container {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: -1;
        top: 100px;
        left: 100px;
        background-color: #3498db;
      }

      .box2 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="container">
        <div class="box box1">-1</div>
        <div class="box box2">0</div>
      </div>
    
  

Giải thích mã:

• .box1: Phần tử với z-index: -1;, sẽ được đặt dưới phần tử với z-index: 0;

Mẹo sử dụng z-index:

• Giảm thiểu sử dụng z-index: cố gắng chỉ sử dụng z-index khi thực sự cần thiết. Cách này giúp tránh những cấu trúc chồng lấp phức tạp và khó hiểu
• Tạo ngữ cảnh chồng lấp một cách có ý thức: tạo ra các ngữ cảnh chồng lấp mới giúp quản lý sự chồng lấp các phần tử, nhưng có thể làm phức tạp cấu trúc tài liệu
• Sử dụng các giá trị z-index có ý nghĩa: gán giá trị z-index một cách hợp lý, ví dụ, sử dụng giá trị dương cho các phần tử trên cùng và âm cho các phần tử dưới cùng