CSS position: relative

Định vị tương đối (relative)

position: relative đặt phần tử ở vị trí bình thường trong luồng tài liệu, sau đó cho phép dịch chuyển nó bằng top, right, bottom, left mà không ảnh hưởng đến các phần tử khác.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      position: relative;
      left: 20px;
      border: 3px solid blue;
    }
  </style>
</head>
<body>
  <h1>Định vị phần tử</h1>
  <div>Phần tử div với position: relative; dịch phải 20px</div>
</body>
</html>

Phần tử vẫn giữ không gian ban đầu trong luồng, chỉ hiển thị dịch chuyển. Làm gốc tọa độ cho phần tử con position: absolute.