Định vị tương đối

Trong CSS, định vị tương đối là một kiểu định vị cho phép bạn định vị một phần tử so với vị trí bình thường của nó trong luồng tài liệu. Khi đặt một phần tử thành position: relative;, phần tử đó vẫn nằm trong luồng bình thường, nhưng bạn có thể dùng các thuộc tính top, right, bottom và left để dịch chuyển phần tử khỏi vị trí ban đầu. 

Đây là cú pháp cơ bản để dùng định vị tương đối:

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

• position: relative;: Khai báo này đặt cơ chế định vị của phần tử thành tương đối.
• top, right, bottom, left: Các thuộc tính này xác định độ lệch của phần tử so với vị trí bình thường. Bạn có thể dùng giá trị dương hoặc âm, được chỉ định bằng pixel (px), em (em), phần trăm (%) hoặc các đơn vị CSS hợp lệ khác.

Ví dụ:

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Trong ví dụ này, phần tử có lớp box sẽ được định vị thấp hơn 20 pixel và lệch phải 30 pixel so với vị trí bình thường trong luồng tài liệu. Khoảng trống mà phần tử vốn chiếm vẫn được giữ nguyên, và các phần tử khác sẽ không tràn vào khoảng trống đó.