Đối với các yếu tố định vị, CSS có các phương pháp định vị sau -
Định vị tương đối trong CSS
Với định vị tương đối, phần tử được định vị so với vị trí bình thường của nó. Đối với điều này, hãy sử dụng vị trí:tương đối.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
position: relative;
color: white;
background-color: orange;
border: 2px dashed blue;
left: 50px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<div class="demo">
position: relative;
</div>
<p>This is another demo text.</p>
</body>
</html> Đầu ra
Định vị tuyệt đối trong CSS
Với định vị tuyệt đối, một phần tử được định vị tương đối với tổ tiên được định vị gần nhất.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div.demo1 {
position: relative;
color: white;
background-color: orange;
border: 2px dashed blue;
width: 600px;
height: 200px;
}
div.demo2 {
position: absolute;
color: white;
background-color: orange;
border: 2px dashed blue;
top: 50px;
right: 0;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<div class="demo1">position: relative;
<div class="demo2">
position: absolute;
</div>
</div>
<p>This is another demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
</body>
</html> Đầu ra
Định vị cố định trong CSS
Một tập hợp phần tử có vị trí:fixed; vẫn ở vị trí cũ ngay cả khi trang được cuộn.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div.demo1 {
position: relative;
color: white;
background-color: orange;
border: 2px dashed blue;
width: 600px;
height: 200px;
}
div.demo2 {
position: absolute;
color: white;
background-color: orange;
border: 2px dashed blue;
top: 50px;
right: 0;
width: 300px;
height: 100px;
}
div.demo3 {
position: fixed;
bottom: 0;
right: 20px;
width: 500px;
border: 3px solid orange;
color: blue;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<div class="demo1">position: relative;
<div class="demo2">
position: absolute;
</div>
<div class="demo3">
position: fixed;
</div>
</div>
<p>This is another demo text.</p>
</body>
</html> Đầu ra
