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 ...