Định vị tương đối (Relative Positioning) 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ó. Sử dụng position: relative.

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

Kết quả

Đặc điểm quan trọng:

• Phần tử vẫn chiếm diện tích ở vị trí gốc trong luồng
• Hiển thị ở vị trí mới (dịch chuyển bởi top/right/bottom/left)
• Tạo stacking context mới
• Làm containing block cho con absolute
• Khác với translate(): relative ảnh hưởng layout, transform không