Thuộc tính vị trí HTML DOM Style trả về và sửa đổi phương thức định vị được phần tử HTML sử dụng trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Trở lại vị trí
object.position
2. Sửa đổi vị trí
object.position = “value”
Ở đây, giá trị có thể là -
| Sr.No | Giá trị &Giải thích |
|---|---|
| 1 | tên đầu tiên Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| 2 | kế thừa Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| 3 | tĩnh Trong điều này, phần tử sẽ hiển thị theo thứ tự khi chúng xuất hiện trong luồng tài liệu. |
| 4 | tuyệt đối Trong trường hợp này, phần tử sẽ định vị tương đối với phần tử tổ tiên được định vị đầu tiên của nó trong tài liệu. |
| 5 | đã sửa Trong trường hợp này, phần tử sẽ định vị so với cửa sổ trình duyệt trong tài liệu. |
| 6 | họ hàng Trong trường hợp này, phần tử sẽ định vị so với vị trí bình thường của nó trong tài liệu. |
| 7 | dính Trong trường hợp này, phần tử sẽ định vị theo vị trí cuộn của người dùng trong tài liệu |
Hãy để chúng tôi xem một ví dụ về Thuộc tính vị trí HTML DOM Style -
Ví dụ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
.square {
width: 100px;
height: 100px;
background: #db133a6b;
top: 150px;
left: 50%;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style position Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set Position</button>
<script>
function set() {
document.querySelector('.square').style.position = "fixed";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Đặt vị trí ”Để đặt vị trí của màu hồng hình vuông.
