z-index Property
Khi các element được thêm thuộc tính position, chúng có thể chồng lên các element khác.
Thuộc tính z-index chỉ định thứ tự của một element (element nào nên được đặt phía trước hoặc phía sau các element khác).
Một element có thể có thứ tự dương hoặc âm:
Tiêu đề
Vì hình ảnh có z-index là -1, nên nó sẽ ở phía sau chữ.
img { position: absolute; left: 0px; top: 0px; z-index: -1; }Lưu ý: z-index chỉ hoạt động trên các element có thuộc tính position (relative, absolute, fixed, sticky) và flex items (element là con trực tiếp của element có display: flex;).
Thêm một số ví dụ z-index
<html> <head> <style> .container { position: relative; } .black-box { position: relative; z-index: 1; border: 2px solid black; height: 100px; margin: 30px; } .gray-box { position: absolute; z-index: 3; background: lightgray; height: 60px; width: 70%; left: 50px; top: 50px; } .green-box { position: absolute; z-index: 2; background: lightgreen; width: 35%; left: 270px; top: -15px; height: 100px; } </style> </head> <body> <div class="container"> <div class="black-box">Black box</div> <div class="gray-box">Gray box</div> <div class="green-box">Green box</div> </div> </body> </html>
Cùng ví dụ trên nhưng không có z-index
<html> <head> <style> .container { position: relative; } .black-box { position: relative; border: 2px solid black; height: 100px; margin: 30px; } .gray-box { position: absolute; background: lightgray; height: 60px; width: 70%; left: 50px; top: 50px; } .green-box { position: absolute; background: lightgreen; width: 35%; left: 270px; top: -15px; height: 100px; } </style> </head> <body> <div class="container"> <div class="black-box">Black box</div> <div class="gray-box">Gray box</div> <div class="green-box">Green box</div> </div> </body> </html>