Để tìm hiểu về z-index, mình xin đưa ra ví dụ về việc sử dụng CSS absolute position để xếp chồng các thành phần lên nhau:
Mã HTML:
<div id="wapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
Mã CSS:
#wapper{position: relative; width: 300px; height: 300px}
.box1,.box2,.box3{position: absolute; width: 150px; height; 150px}
.box1{top: 0; left: 0; background: blue}
.box2{top: 40px; left: 40px; background: green}
.box3{top: 80px; left: 80px; background: #cfcfcf}
Kết quả:
Nguyên lý:
Một thành phần A và B được xếp chồng lên nhau khi thành phần A được định vị trong không gian của thành phần B và ngược lại.
Ở ví dụ trên ta thấy: thành phần box2 có vị trí top: 40px và left: 40px do đó nó nằm trong không gian 150x150px của thành phần box1, do đó thành phần box2 được nằm chồng lên box1, tương tự như thế cho các thành phần còn lại.
Vai trò của Z-index?
Trong ví dụ trên: thành phần box3 chồng lên box2, box2 chồng lên box1 theo đứng thứ tự trong mã HTML, theo mặc định thành phần nào nằm sau sẽ được xếp chồng lên thành phần trước.
Làm sao để thay đổi thứ tự này?. Đó chính là vai trò của z-index trong CSS.
Thành phần nào có chỉ số z-index cao hơn sẽ nằm trên các thành phần khác.
Giá trị của thuộc tính z-index là một số thập phân, mặc định khi không dược khai báo, các thành phần có giá trị z-index là 0.
Trong ví dụ trên, giả sử bây giờ ta muốn thành phần box1 nằm trên box2 và box3, thì chỉ cần gán giá trị z-index cho thành phần box1:
Mã CSS:
.box1{top: 0; left: 0; background: blue; z-index: 1}
Nắm được z-index, kết hợp với CSS position bạn có thể thiết kế được những giao diện khó và độ phức tạp cao.
Tôi hy vọng rằng bài viết này có thể giúp ích cho bạn.