CSS z-index dùng để kiểm soát thứ tự xếp chồng của các phần tử. Nó quyết định phần tử nào nằm trên hoặc dưới dựa trên giá trị.
- Nó chỉ hoạt động trên các phần tử được định vị (
relative,absolutehoặcfixed). - Thứ tự xếp chồng mặc định được áp dụng nếu không có
z-indexnào được xác định. - Thuộc tính
z-indexcó thể nhận nhiều giá trị khác nhau, chúng ta sẽ đề cập bên dưới.
Giá trị thuộc tính
Đây là các giá trị của thuộc tính z-index và mô tả của chúng:
| Giá trị | Mô tả |
|---|---|
auto | Thứ tự xếp chồng bằng với thứ tự của phần tử cha (mặc định). |
number | Thứ tự xếp chồng phụ thuộc vào con số bạn chỉ định. |
initial | Đặt thuộc tính về giá trị mặc định ban đầu. |
inherit | Kế thừa thuộc tính từ phần tử cha. |
1. Sử dụng z-index với auto
Giá trị auto áp dụng thứ tự xếp chồng mặc định. Nó không xác định rõ ngữ cảnh xếp chồng.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
position: relative;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
z-index: auto;
top: 50px;
left: 50px;
position: absolute;
}
.box2 {
background-color: blue;
top: 70px;
left: 70px;
position: absolute;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<!--Driver Code Ends-->
- Hộp màu đỏ (
.box1) và hộp màu xanh lam (.box2) chồng lên nhau. - Vì cả hai hộp đều có
z-indexđược đặt thànhauto, thứ tự mặc định được áp dụng. Hộp màu xanh hiển thị trên cùng vì nó xuất hiện sau.
2. Sử dụng z-index với số
Chỉ định các giá trị số để kiểm soát thứ tự xếp chồng. Giá trị cao hơn sẽ xếp chồng lên trên giá trị thấp hơn.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
z-index: 1;
top: 50px;
left: 50px;
}
.box2 {
background-color: blue;
z-index: 2;
top: 70px;
left: 70px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<!--Driver Code Ends-->
Hộp màu xanh lam (z-index: 2) xuất hiện phía trên hộp màu đỏ (z-index: 1).
3. Sử dụng z-index với initial
Giá trị initial đặt lại z-index về giá trị mặc định là auto.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
z-index: initial;
top: 50px;
left: 50px;
}
.box2 {
background-color: blue;
z-index: 1;
top: 70px;
left: 70px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<!--Driver Code Ends-->
Hộp màu đỏ tuân theo thứ tự xếp chồng mặc định. z-index: initial đặt lại về auto.
4. Sử dụng z-index với inherit
Giá trị inherit đảm bảo phần tử kế thừa giá trị z-index từ phần tử cha.
<!--Driver Code Starts--gt;
<html>
<head>
<!--Driver Code Ends--gt;
<style>
.parent {
position: relative;
z-index: 5;
}
.child {
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
z-index: inherit;
top: 50px;
left: 50px;
}
</style>
<!--Driver Code Starts--gt;
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
<!--Driver Code Ends--gt;
Phần tử con kế thừa giá trị z-index (5) từ phần tử cha của nó.
5. Kết hợp z-index với nhiều ngữ cảnh
Khi làm việc với nhiều ngữ cảnh xếp chồng, z-index chỉ áp dụng trong ngữ cảnh đó.
<!--Driver Code Starts--gt;
<html>
<head>
<!--Driver Code Ends--gt;
<style>
.parent {
position: relative;
z-index: 1;
background-color: lightgray;
width: 200px;
height: 200px;
}
.child1 {
position: absolute;
z-index: 2;
background-color: red;
width: 100px;
height: 100px;
}
.child2 {
position: absolute;
z-index: 1;
background-color: blue;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
}
</style>
<!--Driver Code Starts--gt;
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
<!--Driver Code Ends--gt;
Hộp màu đỏ xếp chồng lên trên hộp màu xanh lam. Chúng nằm trong cùng một ngữ cảnh xếp chồng. Ngữ cảnh này được xác định bởi phần tử cha.