Chúng ta có thể xác định vị trí của một phần tử trong CSS là tĩnh không hiển thị phần tử theo bất kỳ cách đặc biệt nào, mà theo cách bình thường. Các phần tử có định vị là tĩnh không bị ảnh hưởng bởi bất kỳ thuộc tính Định vị CSS nào (trái, phải, trên và dưới).
Ví dụ
Hãy xem một ví dụ về Phương pháp Định vị Tĩnh CSS -
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
}
div:first-child {
position: static;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>This is demo text wherein we are displaying an example for static positioning.</p>
<div></div>
</body>
</html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
Ví dụ
Hãy xem một ví dụ khác về phương pháp định vị -
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px double #a43356;
margin: 5px;
padding: 5px;
}
#d1 {
position: relative;
height: 10em;
}
#d2 {
position: absolute;
width: 20%;
bottom: 10px; /*relative to parent d1*/
}
#d3 {
position: fixed;
width: 30%;
top:10em; /*relative to viewport*/
}
</style>
</head>
<body>
<div id="d1">This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
