Trong CSS z-index là gì? Nó hoạt động như thế nào?

Trong CSS, z-index là một thuộc tính quy định thứ tự xếp chồng (stack order) của một phần tử. Phần tử có thứ tự xếp chồng cao hơn luôn nằm phía trước phần tử có thứ tự xếp chồng thấp hơn. Điều này cho phép các nhà phát triển kiểm soát phần tử nào sẽ hiển thị trên cùng khi các phần tử trùng lặp hoặc chồng lên nhau.

Cách Hoạt Động

• Chỉ áp dụng cho phần tử đã được định vị: z-index chỉ hoạt động trên các phần tử đã được định vị (positioned elements), bao gồm position: absolute, position: relative, position: fixed, hoặc position: sticky và các phần tử con trực tiếp của display: flex.
• Giá trị: z-index có thể được thiết lập bằng một số nguyên (integer), bao gồm cả số âm. Một giá trị cao hơn đồng nghĩa với việc phần tử sẽ nằm trên các phần tử có giá trị z-index thấp hơn trong không gian ba chiều.
• Tạo stacking context: Một phần tử với z-index không phải là auto sẽ tạo ra một stacking context mới, nghĩa là z-index của các phần tử con sẽ được so sánh với nhau trong phạm vi của phần tử đó, không phải với các phần tử bên ngoài.

Ví Dụ

• Thay đổi thứ tự xếp chồng: Bạn có thể sử dụng z-index để thay đổi thứ tự xếp chồng của các phần tử chồng lên nhau. Ví dụ, nếu bạn muốn một phần tử div nằm trên một phần tử khác, bạn có thể đặt z-index của nó cao hơn.

Lưu Ý

• Không ảnh hưởng nếu không định vị: Nếu không định vị phần tử (position: static, là giá trị mặc định), z-index sẽ không có tác dụng.
• Thứ tự mặc định: Nếu hai phần tử chồng lên nhau mà không có z-index được chỉ định, phần tử được định nghĩa sau cùng trong mã HTML sẽ hiển thị phía trên[4].

z-index là một công cụ mạnh mẽ trong CSS, cho phép các nhà phát triển web kiểm soát cách các phần tử được xếp chồng lên nhau trên trang, từ đó tạo ra các hiệu ứng trực quan phức tạp và tinh tế.