Ví dụ CSS Grid Bài 9: Thuộc tính Position

Để định vị một phần tử so với phần tử cha trong CSS thường hay là CSS Grid chúng ta đều sử dụng thuộc tính Position.

Nếu bạn đã học qua CSS thì điều này thật đơn giản. Chúng ta sẽ thiếp lập phần tử cha với thuộc tính position: relative;

Sau đó sẽ định vị vị trí cho các phần tử con theo phần tử cha bằng thuộc tính positon: absolute;

Xác định vị trí phần tử cha bằng thuộc tính position

Trong lập trình, quan trọng hơn vẫn là kỹ năng, do đó để thử nghiệm thuộc tính positon thì đầu tiên phải chuẩn bị nguyên liệu.

Do đó, bạn hãy tự viết lại. Còn tôi sẽ chỉ giải thích về thuộc tính position thôi.

Ở đây tôi sử dụng grid-area để bố trí các khối. Nếu bạn chưa hiểu thì hãy xem lại bài này: Grid area

Đầu tiên, chúng ta sẽ xác định phần tử cha để sau đó định vị phần tử con theo phần tử cha.

.content {
  grid-area: content;
  position: relative;
}

Sử dụng thuộc tính position: relative; để xác định khối content là phần tử cha.

Định vị phần tử con bằng thuộc tính positon

Sau khi đã xác định được phần tử cha. Thì chúng ta sẽ định vị phần tử con theo nó.

Sử dụng thuộc tính postion: absolute; để nói cho trình duyệt biết rằng: Phần tử này đang được định vị vị trí của nó tương đối so với phần tử cha (phần tử có thuộc tính positon: relative;).

.topleft {
  position: absolute;
  top: 0;
  left: 0;
}

.topright {
  position: absolute;
  top: 0;
  right: 0;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottomright {
  position: absolute;
  bottom: 0;
  right: 0;
}

Thay đổi giá trị để hiểu rõ cách định vị hơn.

Cũng giống như trong CSS. Mỗi phần tử con muốn định vị vị trí tương đối đều lấy phần tử cha làm gốc và phải nằm trong phần tử cha.

Như vậy là bạn đã biết cách sử dụng thuộc tính positon. Bài sau chúng ta sẽ tìm hiểu về cách css grid phân bổ các phần tử.

NOTE: Hãy thử thay đổi ít nhất 7 phiên bản khác nhau trước khi sang bài tiếp theo.

Bài tiếp theo: Ví dụ CSS Grid Bài 10: Cách bố trí phần tử tự động