Thuộc tính HTML DOM style zIndex trả về và sửa đổi thứ tự xếp chồng của một phần tử được định vị trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại zIndex
object.style.zIndex
-
Đang sửa đổi zIndex
object.style.zIndex = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| tên đầu tiên | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| tự động | Trong đó các phần tử xếp theo thứ tự dựa trên thứ tự của chúng trong tài liệu HTML. |
| số | Nó đại diện cho một số nguyên chỉ định thứ tự ngăn xếp của một phần tử. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính zIndex kiểu DOM trong HTML -
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
}
.box1 {
width: 100px;
height: 100px;
background: lightcoral;
position: relative;
top: 50px;
}
.box2 {
width: 100px;
height: 100px;
background: lightgreen;
position: relative;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style zIndex Property Example</h1>
<div class='box1'></div>
<div class='box2'></div>
<button onclick="add()" class="btn">Change zIndex</button>
<script>
function add() {
document.querySelector('.box1').style.zIndex = "1";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thay đổi zIndex ”Để thay đổi thứ tự của hộp màu đỏ và xanh lá cây -
