Vị trí tương đối thay đổi vị trí của phần tử HTML so với vị trí thường xuất hiện. Vì vậy, "left:20" thêm 20 pixel vào vị trí TRÁI của phần tử.
Bạn có thể sử dụng hai giá trị top và trái cùng với vị trí thuộc tính để di chuyển một phần tử HTML đến bất kỳ đâu trong tài liệu HTML.
- Di chuyển sang trái - Sử dụng giá trị âm cho trái .
- Di chuyển sang phải - Sử dụng giá trị dương cho trái.
- Di chuyển lên - Sử dụng giá trị âm cho trên cùng.
- Di chuyển xuống - Sử dụng giá trị dương cho trên cùng.
Ví dụ
Bạn có thể 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;"> This div has relative positioning. </div> </body> </html>