Vị trí tương đối CSS

Khung phần tử được định vị tương đối sẽ di chuyển một khoảng cách nhất định. Phần tử vẫn giữ hình dạng ban đầu của nó, không gian mà nó đã chiếm vẫn được giữ lại.

Vị trí tương đối CSS

Vị trí tương đối là một khái niệm rất dễ hiểu. Nếu định vị tương đối một phần tử, nó sẽ xuất hiện ở vị trí hiện tại của nó. Sau đó, có thể đặt vị trí thẳng đứng hoặc ngang để di chuyển phần tử 'so với' điểm xuất phát của nó.

Nếu đặt top là 20px, khung sẽ ở dưới cùng của vị trí ban đầu 20 pixel. Nếu left được đặt là 30 pixel, sẽ tạo ra khoảng trống 30 pixel ở bên trái của phần tử,也就是 di chuyển phần tử sang phải.

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

Như hình dưới đây:

CSS 相对定位实例

Lưu ý, khi sử dụng vị trí tương đối, bất kể có di chuyển hay không, phần tử vẫn chiếm không gian ban đầu của nó. Do đó, di chuyển phần tử sẽ gây ra hiện tượng che盖 khác phần tử.

CSS 相对定位实例

Định vị: Định vị tương đối
Ví dụ này minh họa cách định vị một phần tử so với vị trí bình thường của nó.