Định vị tương đối thay đổi vị trí của phần tử HTML tương đối với vị trí bình thường của nó. Vì vậy "left:20" sẽ thêm 20 pixel vào vị trí TRÁI của phần tử.
Bạn có thể dùng hai giá trị top và left cùng với thuộc tính position để di chuyển phần tử HTML bất kỳ đâu trong tài liệu.
- Di chuyển sang trái - Dùng giá trị âm cho left.
- Di chuyển sang phải - Dùng giá trị dương cho left.
- Di chuyển lên trên - Dùng giá trị âm cho top.
- Di chuyển xuống dưới - Dùng giá trị dương cho top.
Ví dụ
Thử chạy mã sau để triển khai định vị tương đối:
<html>
<head>
</head>
<body>
<div style="position:relative;left:80px;top:2px;background-color:yellow;">
Div này có định vị tương đối.
</div>
</body>
</html>