Định vị tuyệt đối (Absolute Positioning) trong CSS

Với định vị tuyệt đối, một phần tử được định vị so với tổ tiên được định vị gần nhất (nearest positioned ancestor).

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>Tiêu đề Demo</h2>
<p>Đây là văn bản demo.</p>
<p>Đây là văn bản demo.</p>
<p>Đây là văn bản demo.</p>
<p>Đây là văn bản demo.</p>
<div class="demo1">
  position: relative;
  <div class="demo2">position: absolute;</div>
</div>
<p>Đây là văn bản demo khác.</p>
<p>Đây là văn bản demo.</p>
<p>Đây là văn bản demo.</p>
</body>
</html>

Kết quả

Quy tắc quan trọng:

• Phần tử absolute tìm tổ tiên gần nhất có position khác static
• Nếu không có, so với <html> (initial containing block)
• Phần tử ra khỏi luồng bình thường (không chiếm diện tích)
• Dùng top/right/bottom/left để định vị chính xác
• Cha thường dùng position: relative (không di chuyển) làm mốc