17/05/2022 09:34 am | Luợt xem : 2441 09:34 am | Luợt xem : 2441 Show
Thuộc tính z index trong css là thuộc tính thiết lập thứ tự xếp chồng nhau của một phần tử vị trí. Nếu bạn đang học cách sử dụng thuộc tính này để thiết kế website của mình thì bài viết này dành cho bạn. Tại bài viết hôm nay chúng tôi sẽ giới thiệu đến bạn đọc những thông tin hữu ích về thuộc tính z index trong css. Giới thiệu đến bạn cấu trúc và cách sử dụng thuộc tính để ứng dụng vào thực tế. Mời bạn đọc cùng theo dõi.  Thuộc tính z index trong css là gì? Hướng dẫn 2 cách sử dụng thuộc tính z index Contents
Thuộc tính z index trong css là gì?Một ví dụ cơ bản về thuộc tính z index trong css Một ví dụ cơ bản về thuộc tính z index trong cssNhững trình duyệt hỗ trợ thuộc tính z index trong css <div style="height: 280px; margin: 20px; position: relative;"> <div style="background-color: blue; height: 200px; left: 0px; position: absolute; top: 0px; width: 200px;"></div> <div style="background-color: black; height: 200px; left: 40px; position: absolute; top: 40px; width: 200px;"></div> <div style="background-color: red; height: 200px; left: 80px; position: absolute; top: 80px; width: 200px;"></div> </div> Hướng dẫn cách sử dụng thuộc tính z index trong css Hướng dẫn sử dụng z-index và position Những trình duyệt hỗ trợ thuộc tính z index trong cssHướng dẫn cách sử dụng thuộc tính z index trong css Những trình duyệt hỗ trợ thuộc tính z index trong css Hướng dẫn cách sử dụng thuộc tính z index trong css Hướng dẫn cách sử dụng thuộc tính z index trong cssHướng dẫn sử dụng z-index và positionSử dụng z-index âm và element không có thuộc tính position <div class="colors">
<div class="red">
<span>Red</span>
</div>
<div class="green">
<span>Green</span>
</div>
<div class="blue">
<span>Blue</span>
</div>
</div>Kết luận .colors {
margin - left: 40 px;
margin - top: 40 px;
}
.red, .green, .blue {
width: 100 px;
height: 100 px;
color: white;
line - height: 100 px;
text - align: center;
}
.red {
background: red;
}
.green {
margin - top: -40 px;
margin - left: 60 px;
background: green;
}
.blue {
margin - top: -40 px;
margin - left: 120 px;
background: blue;
}Thuộc tính z-index là thuộc tính thiết lập thứ tự xếp chồng lên nhau của một phần tử vị trí. Thứ chồng nhau này được sắp xếp theo các giá trị số. Các thành phần HTML có chỉ số z-index cao hơn sẽ được xếp nằm ở bên trên. Ngược lại, thành phần HTML có chỉ số z-index thấp hơn sẽ nằm ở phía dưới. Giá trị mặc định cho các thuộc tính là 0. Bạn cũng có thể sử dụng số âm để chỉ vị trí của các thuộc tính HTML. Có một mẹo khi sử dụng z index chính là không sử dụng đơn vị. Ngoài ra có một lưu ý bạn nên biết đó chính là z-index chỉ làm việc cùng với thuộc tính position. Sau đó bạn có thể thêm thuộc tính z index vào 3 block tương ứng như sau: red = 3, green = 2 và blue = 1. Mục đích là để cho red đổi lên đầu sau đó sẽ đến green và cuối cùng là blue. .red {
z - index: 3;
}
.green {
z - index: 2;
}
.blue {
z - index: 1;
}Để giúp bạn dễ hình dung hơn về cách sử dụng thuộc tính z index chúng tôi đã chuẩn bị sẵn một đoạn code sau đây: .red {
z - index: 3;
position: relative;
}
.green {
z - index: 2;
position: relative;
}
.blue {
z - index: 1;
position: relative;
}Sau khi làm theo đoạn mẫu này chúng ta sẽ được kết quả như hình dưới đây: Sử dụng z-index âm và element không có thuộc tính positionKết luận .green {
z - index: 2;
/*position: relative;*/
}Thuộc tính z-index là thuộc tính thiết lập thứ tự xếp chồng lên nhau của một phần tử vị trí. Thứ chồng nhau này được sắp xếp theo các giá trị số. Các thành phần HTML có chỉ số z-index cao hơn sẽ được xếp nằm ở bên trên. Ngược lại, thành phần HTML có chỉ số z-index thấp hơn sẽ nằm ở phía dưới. Giá trị mặc định cho các thuộc tính là 0. Bạn cũng có thể sử dụng số âm để chỉ vị trí của các thuộc tính HTML. Có một mẹo khi sử dụng z index chính là không sử dụng đơn vị. Ngoài ra có một lưu ý bạn nên biết đó chính là z-index chỉ làm việc cùng với thuộc tính position. Để giúp bạn dễ hình dung hơn về cách sử dụng thuộc tính z index chúng tôi đã chuẩn bị sẵn một đoạn code sau đây: .blue {
z - index: -1;
position: relative;
} Sau khi làm theo đoạn mẫu này chúng ta sẽ được kết quả như hình dưới đây: Kết luậnThuộc tính z-index là thuộc tính thiết lập thứ tự xếp chồng lên nhau của một phần tử vị trí. Thứ chồng nhau này được sắp xếp theo các giá trị số. Các thành phần HTML có chỉ số z-index cao hơn sẽ được xếp nằm ở bên trên. Ngược lại, thành phần HTML có chỉ số z-index thấp hơn sẽ nằm ở phía dưới. Giá trị mặc định cho các thuộc tính là 0. Bạn cũng có thể sử dụng số âm để chỉ vị trí của các thuộc tính HTML. Có một mẹo khi sử dụng z index chính là không sử dụng đơn vị. Ngoài ra có một lưu ý bạn nên biết đó chính là z-index chỉ làm việc cùng với thuộc tính position. Các tìm kiếm liên quan đến chủ đề “z index trong css”
Bài viết liên quanNhững vấn đề về flex css cho người mới bắt đầu Thuộc tính Float CSS là gì? Phân biệt Float và Clear trong CSS Media CSS là gì? Giới thiệu 02 cách sử dụng Media CSS cơ bản Normalize CSS CDN là gì? 05 điểm khác biệt với Reset CSS |
