z-index là một thuộc tính trong CSS được sử dụng để xác định thứ tự xếp chồng của các phần tử trên trang web. Thuộc tính này rất quan trọng khi bạn làm việc với các phần tử có vị trí (positioned elements) như absolute, relative, fixed, hoặc sticky. Bài viết này sẽ giải thích chi tiết về khái niệm và cách thức hoạt động của z-index.
z-indexz-index xác định thứ tự xếp chồng của các phần tử. Các phần tử với z-index cao hơn sẽ được hiển thị trên các phần tử có z-index thấp hơn.z-index: Giá trị của z-index có thể là một số nguyên dương, số nguyên âm, hoặc không có giá trị nào (có thể hiểu là 0 mặc định). Phần tử có z-index bằng 1 sẽ nằm trên phần tử có z-index bằng 0..element {
position: relative; /* hoặc absolute, fixed, sticky */
z-index: 10; /* Giá trị z-index */
}z-index chỉ hoạt động trong ngữ cảnh xếp chồng của các phần tử. Điều này có nghĩa là:
position khác static và có giá trị z-index khác auto.z-index của chúng.<div class="parent">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
<style>
.parent {
position: relative;
z-index: 1; /* Ngữ cảnh xếp chồng */
}
.child1 {
position: absolute;
z-index: 2; /* Sẽ nằm trên child2 */
}
.child2 {
position: absolute;
z-index: 1; /* Sẽ nằm dưới child1 */
}
</style>Trong ví dụ này, child1 sẽ được hiển thị trên child2 mặc dù child2 có z-index thấp hơn trong ngữ cảnh của .parent.
z-indexz-index chỉ có tác dụng trên các phần tử đã được định nghĩa vị trí (positioned elements). Nếu phần tử có position: static, z-index sẽ không có tác dụng.z-index cao hơn trong một ngữ cảnh xếp chồng không nhất thiết phải được hiển thị trên các phần tử có z-index thấp hơn trong ngữ cảnh khác.z-index, giá trị mặc định của nó là auto, có nghĩa là nó sẽ không ảnh hưởng đến việc xếp chồng.z-index là một thuộc tính quan trọng trong CSS cho phép bạn kiểm soát thứ tự xếp chồng của các phần tử trên trang web. Bằng cách hiểu rõ cách hoạt động của z-index và ngữ cảnh xếp chồng, bạn có thể dễ dàng quản lý giao diện của trang web một cách hiệu quả và chính xác. Sử dụng z-index một cách hợp lý sẽ giúp tạo ra trải nghiệm người dùng tốt hơn với các yếu tố trực quan rõ ràng.
