Thuộc tính z-index trong CSS
Trần Thị Vân - 1275
- 17/07/2025
Chức năng của Thuộc tính z-index trong CSS
Thuộc tính z-index trong CSS dùng để xét thẻ HTML nằm trên thẻ HTML khác, nó đi kèm với thuộc tính position: relative, position: absolute, position: fixed.
Cú pháp của Thuộc tính z-index trong CSS
z-index: giatri;
giatri: Giá trị để xét thẻ HTML nằm trên thẻ HTML khác, giá trị z-index cao hơn sẽ nằm trên (Ví dụ: 1,2,3,....)
Ví dụ Thuộc tính z-index trong CSS
position: absolute;z-index:1;
position: absolute;z-index:2;
z-index:1;position: fixed;
z-index:2;position: fixed;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính z-index trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divload {width:100%; height:300px; background:red; float:left; margin-bottom:10px}
#div-fixed-trai{width:200px; height:auto; padding:10px; background: green; color:#fff;bottom:10px;right:10px}
#div-fixed-phai{width:200px; height:auto; padding:10px; background: green; color:#fff;bottom:10px;left:10px}
#ab-zindex1{width:50%; height:90%; background:green;color:#fff; top:10%;right:10px}
#ab-zindex2{width:45%; height:60%; background:blue;color:#fff; top:20%;right:15px}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính z-index trong CSS</h1>
<p>Dùng để xét thẻ HTML nằm trên thẻ HTML khác, nó đi kèm với thuộc tính position: relative, position: absolute, position: fixed:</p>
<div class="divload" style="position: relative;">
<p>position: relative;</p>
<div id="ab-zindex1" style="position: absolute;z-index:1;" >position: absolute;z-index:1;</div>
<div id="ab-zindex2" style="position: absolute;z-index:2;" >position: absolute;z-index:2;</div>
</div>
<div class="divload"></div>
<div class="divload"></div>
<div id="div-fixed-trai" style="z-index:1;position: fixed">z-index:1;position: fixed</div>
<div id="div-fixed-phai" style="z-index:2;position: fixed">z-index:2;position: fixed</div>
</body>
</html>
Những lưu ý khi sử dụng thuộc tính z-index trong CSS
z-index giúp kiểm soát thứ tự hiển thị giữa các phần tử khi chúng chồng lên nhau. Tuy nhiên, giá trị càng lớn không đồng nghĩa phần tử chắc chắn nằm trên cùng. Muốn xử lý đúng các tình huống liên quan đến lớp hiển thị, cần hiểu cách CSS tạo và quản lý stacking context.
z-index không hoạt động khi phần tử không có thứ tự xếp lớp phù hợp
Một lỗi thường gặp là đặt z-index nhưng không thấy vị trí hiển thị thay đổi. Nguyên nhân có thể nằm ở cách phần tử tham gia vào quá trình xếp lớp của trình duyệt.
Đặc biệt, với những trường hợp sử dụng position, cần kiểm tra trạng thái của phần tử trước khi tăng z-index. Không nên chỉ liên tục đặt các giá trị như 999, 9999 hoặc 99999 để thử nghiệm mà chưa xác định nguyên nhân.
Khi gặp lỗi, nên kiểm tra lần lượt phần tử cần đưa lên trước, phần tử đang che nó và các phần tử cha. Cách này giúp xác định đúng vị trí gây ra vấn đề thay vì tạo thêm nhiều giá trị z-index không cần thiết.
z-index cao chưa chắc nằm trên mọi phần tử khác
Giá trị z-index chỉ có ý nghĩa trong phạm vi xếp lớp mà phần tử đang tham gia. Vì vậy, một phần tử có z-index: 10 vẫn có thể hiển thị phía sau phần tử khác có z-index: 2 nếu hai phần tử thuộc những ngữ cảnh xếp lớp khác nhau.
Đây là lý do việc tăng z-index lên một con số rất lớn đôi khi không giải quyết được lỗi. Thay vì chỉ so sánh hai con số, cần xem xét cả cấu trúc phần tử cha và các stacking context liên quan.
Trong giao diện thực tế, nên ưu tiên sử dụng các mức z-index có quy ước rõ ràng, chẳng hạn một nhóm cho nội dung, một nhóm cho menu, một nhóm cho lớp phủ và một nhóm cho hộp thoại. Cách tổ chức này giúp CSS dễ kiểm soát hơn khi website phát triển.
Stacking context ảnh hưởng đến z-index như thế nào
Stacking context có thể hiểu là một phạm vi xếp lớp riêng trong giao diện. Khi một phần tử tạo ra stacking context, các phần tử bên trong nó được sắp xếp theo quy tắc của phạm vi đó trước khi toàn bộ phạm vi được so sánh với các phần tử bên ngoài.
Một số thuộc tính CSS có thể tạo stacking context trong những điều kiện nhất định, chẳng hạn position kết hợp với z-index, opacity nhỏ hơn 1, transform hoặc một số thuộc tính liên quan đến hiệu ứng hiển thị.
Vì vậy, khi z-index cho kết quả không như mong muốn, hãy kiểm tra cả phần tử cha thay vì chỉ nhìn vào phần tử đang bị che. Nhiều lỗi tưởng là do z-index thực chất lại xuất phát từ stacking context được tạo ở một cấp cao hơn.
Cách tránh xung đột z-index trong CSS
Không nên sử dụng z-index một cách tùy ý trên quá nhiều phần tử. Một hệ thống thứ tự rõ ràng sẽ giúp giao diện ổn định và giảm thời gian xử lý lỗi khi thêm menu, popup, modal hoặc các thành phần nổi khác.
- Xác định rõ thành phần nào cần nằm trước hoặc sau.
- Ưu tiên các giá trị z-index nhỏ và có quy ước thay vì dùng số quá lớn.
- Kiểm tra stacking context khi z-index không cho kết quả như mong đợi.
- Hạn chế đặt z-index cho những phần tử không thực sự cần xếp lớp.
- Kiểm tra cả phần tử cha khi xảy ra hiện tượng bị che khuất.
Cách tiếp cận này giúp z-index trở thành một phần có tổ chức trong hệ thống CSS thay vì một chuỗi giá trị lớn được thêm vào để xử lý từng lỗi riêng lẻ.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính z-index trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
