Thuộc tính z-index trong CSS đóng vai trò quan trọng trong việc xác định thứ tự hiển thị của các phần tử trên trình duyệt. Bài viết này CNET sẽ đưa ra cái nhìn tổng quan về cách z-index hoạt động, cùng với các ví dụ minh họa và một số lưu ý quan trọng khi sử dụng thuộc tính này để kiểm soát vị trí và xếp lớp của các phần tử trên trang web. Cùng bắt đầu tìm hiểu về thuộc tính này ngay bây giờ nhé.
1.Định nghĩa về thuộc tính Z-index trong CSS
Khi các phần tử được định vị, chúng có thể chồng lên các phần tử khác. Thuộc tính z-index chỉ định thứ tự ngăn xếp của một phần tử. Trường hợp các phần tử chồng lên nhau trong cùng một không gian, z-index quyết định phần tử nào sẽ nằm trên và phần tử nào sẽ nằm dưới.
Giá trị của z-index là một số nguyên, đại diện cho vị trí của phần tử trong ngăn xếp. Phần tử có z-index lớn hơn sẽ được hiển thị trên cùng, phần tử có z-index thấp hơn sẽ hiển thị phía dưới.
Ngoài ra, một phần tử có thể có thứ tự xếp dương hoặc âm:
Trong ví dụ trên, vì ở thẻ img có z-index là -1 nên khi hiển thị, hình ảnh sẽ được hiển thị ở phía sau dòng văn bản h1, tuân theo quy tắc thẻ h1 có z-index lớn hơn sẽ được hiển thị trên cùng và thẻ img có z-index thấp hơn nên nội dung sẽ hiển thị phía dưới.
Lưu ý: Thuộc tính z-index chỉ có hiệu lực đối với các phần tử được định vị với thuộc tính position là absolute, relative, hoặc fixed. Điều này cho phép kiểm soát vị trí và xếp lớp của các phần tử trong giao diện web.
2.Tìm hiểu một số ví dụ về thuộc tính Z-index
Để hiểu rõ hơn về thuộc tính chỉ mục Z-index chúng ta hãy cùng tìm hiểu thêm về ví dụ sau dưới đây:
Ở ví dụ trên, chúng ta có 3 hộp như sau:
- Hộp đen (z-index: 1): mang chỉ số z-index bằng 1
- Hộp đỏ (z-index: 3): mang chỉ số z-index bằng 3
- Hộp xanh (z-index: 2): mang chỉ số z-index bằng 2
Khi đó hiển thị sẽ được sắp xếp theo thứ tự: Hộp đỏ (z-index: 3), tiếp theo đó là Hộp xanh (z-index: 2) và cuối cùng là Hộp đen (z-index: 1).
Ở trong trường hợp tiếp theo, nếu hai phần tử được định vị chồng lên nhau mà không được z-index chỉ định thì phần tử được xác định cuối cùng trong mã HTML sẽ được hiển thị trên cùng.
Như trong ví dụ trên, chúng ta cũng có 3 hộp:
Hộp đen (z-index: 1)
Hộp đỏ (z-index: 3)
Hộp xanh (z-index: 2)
Tuy nhiên, 3 hộp trên đều định vị chồng lên nhau mà không được z-index chỉ định, nên kết quả hiển thị sẽ là phần tử được xác định cuối cùng trong mã HTML sẽ được hiển thị trên cùng được sắp xếp theo thứ tự như sau: Hộp xanh, tiếp theo đó là Hộp đỏ và cuối cùng là Hộp đen.
Vậy là chúng ta đã thấy cách quản lý thứ tự hiển thị của các phần tử trên trang web bằng thuộc tính z- index một cách hiệu quả. Hãy nhớ rằng khi sử dụng z-index, cần phải hiểu rõ cách hoạt động của nó để tránh gặp phải những vấn đề về hiển thị không mong muốn. Hy vọng rằng thông qua bài viết này, CNET có thể giúp bạn có cái nhìn tổng quan và kiến thức cần thiết để áp dụng z-index vào dự án thực tế thành thạo và hiệu quả hơn.
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
