Chiều z của phần tử
Khi các phần tử định vị không theo luồng mặc định thông thường. Một phần tử có thể đè nên phần tử khác. Lúc đó chỉ số z-index quy định thứ tự xếp chông nên nhau, cái nào nằm trước, cái nào nằm sau ở một vị trí.
<style> .blue { background-color: #8EC4D0; margin-bottom: 15px; width: 120px; height: 120px; color: #FFF; } .red { background-color: #FF4D4D; position: relative; width: 120px; height: 120px; color: #FFF; margin-top: -50px; margin-left: 50px; } </style> <div class="blue">Nội dung trong hộp màu xanh</div> <div class="red">Nội dung trong hộp màu đỏ</div>
Bạn thấy hộp màu đỏ đè nên hộp màu xanh vì trong nội dung HTML hộp màu đỏ nằm sau hộp màu xanh.
Với thuộc tính z-index
bạn có thể tự do điều khiển màu đỏ nằm sau hay trước màu xanh.
Khi một phần tử có z-index
nhỏ hơn thì nó nằm sau phần tử có z-index
lớn hơn
<style> .blue2 { position: relative; background-color: #8EC4D0; margin-bottom: 15px; width: 120px; height: 120px; color: #FFF; z-index: 3; } .red2 { background-color: #FF4D4D; position: relative; width: 120px; height: 120px; color: #FFF; margin-top: -50px; margin-left: 50px; z-index: 0; } </style> <div class="blue2">Nội dung trong hộp màu xanh</div> <div class="red2">Nội dung trong hộp màu đỏ</div>
Lưu ý z-index
chỉ làm việc khi phần tử có thuộc tính position
(position:absolute
position:relative
position:fixed
)