Bố cục CSS - Thuộc tính z-index
Thuộc z-indextính chỉ định thứ tự ngăn xếp của một phần tử.
Thuộc tính z-index
Khi các phần tử được định vị, chúng có thể chồng lên các phần tử khác.
Thuộc z-indextính chỉ định thứ tự ngăn xếp của một phần tử (phần tử nào nên được đặt phía trước hoặc phía sau các phần tử khác).
Một phần tử có thể có thứ tự ngăn xếp dương hoặc âm:
Đây là một tiêu đề
Vì hình ảnh có chỉ số z là -1 nên nó sẽ được đặt phía sau văn bản.
Thí dụ
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Lưu ý: z-index chỉ hoạt động trên các phần tử được định vị (vị trí: tuyệt đối, vị trí: tương đối, vị trí: cố định hoặc vị trí: dính) và các mục linh hoạt
(phần tử là con trực tiếp của hiển thị: phần tử flex).
Một ví dụ về chỉ số z khác
Thí dụ
Ở đây chúng ta thấy rằng một phần tử có thứ tự ngăn xếp lớn hơn luôn ở trên một phần tử có thứ tự ngăn xếp thấp hơn:
<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>
Không có chỉ số z
Nếu hai phần tử được định vị chồng lên nhau mà không z-index
được chỉ định, phần tử được xác định cuối cùng trong mã HTML sẽ được hiển thị ở trên cùng.
Thí dụ
Ví dụ tương tự như trên, nhưng ở đây không có chỉ mục z nào được chỉ định:
<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>
Thuộc tính CSS
| Property | Description |
|---|---|
| z-index | Sets the stack order of an element |