Định vị tương đối của các phần tử trong CSS

Định vị tương đối được thiết lập bằng cách sử dụng giá trị relative cho thuộc tính position. Kiểu định vị này cho phép dịch chuyển phần tử so với vị trí hiện tại của nó một khoảng cách nhất định. Khi đó, tất cả các phần tử khác trên trang sẽ nghĩ rằng, phần tử vẫn ở vị trí ban đầu của nó. Tức là với kiểu định vị này, phần tử không bị loại bỏ khỏi luồng thông thường.

Các khoảng dịch chuyển từ vị trí hiện tại được xác định bằng các thuộc tính top, right, bottom và left.

Ví dụ

Đầu tiên, hãy tạo hai khối mà không sử dụng định vị:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Ví dụ

Bây giờ, hãy thêm relative cho khối đầu tiên. Hiện tại sẽ chưa có gì thay đổi, vì chúng ta chưa chỉ định khoảng dịch chuyển cho khối:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Ví dụ

Bây giờ hãy di chuyển khối của chúng ta xuống dưới 30px bằng cách đặt thuộc tính top cho nó. Khi đó, tất cả các phần tử khác sẽ hành xử như thể khối của chúng ta vẫn ở nguyên vị trí ban đầu:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Ví dụ

Hãy cũng di chuyển khối của chúng ta sang phải 40px bằng cách đặt thuộc tính left cho nó:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Ví dụ

Giá trị âm của các thuộc tính top, right, bottom và left sẽ dịch chuyển theo hướng ngược lại. Ví dụ, giá trị dương của top dịch xuống dưới, còn giá trị âm - dịch lên trên.

Hãy di chuyển khối thứ hai của chúng ta lên trên 40px bằng cách đặt giá trị âm cho thuộc tính top:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Bài tập thực hành

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}