Chúng tôi có thể xác định vị trí của một phần tử trong CSS là cố định sẽ hiển thị phần tử đó so với chế độ xem của người dùng. Các phần tử có phương pháp định vị là cố định không di chuyển ngay cả khi cuộn và được định vị bằng thuộc tính Định vị CSS (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ị Cố định CSS -
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div:first-child {
background-color: orange;
text-align: center;
}
div:last-child {
width: 250px;
height: 100px;
margin: auto;
background-color: turquoise;
position: absolute;
z-index: -1;
top:0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>What is ASP.NET?</div>
<p>ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites............</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">Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies. <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 -
