Cách đặt các phần tử ở cuối vùng chứa bằng CSS

Tìm hiểu cách đặt các phần tử ở cuối vùng chứa bằng CSS.

HTML có mối quan hệ cha-con. Để đặt một phần tử ở cuối vùng chứa của nó bằng CSS, bạn cần sử dụng các thuộc tính và giá trị sau:

• position: relative; (cha mẹ)
• position: absolute; (con)
• bottom: 0; (con)

Ví dụ:

<div class="parent">
  <div class="child">
  </div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  bottom: 0;
}

Để dễ hình dung hơn, tôi đã lấy các lớp CSS từ phía trên và thêm một số chiều rộng, chiều cao và màu sắc cho chúng:

.parent {
  position: relative;
  background-color: black;
  height: 200px;
  width: 200px;
}

.child {
  position: absolute;
  bottom: 0;
  background-color: darkred;
  height: 50px;
  width: 50px;
}

Kết quả:

Như bạn có thể thấy trong ví dụ trên, phần tử con tự động được ghim vào bên trái vùng chứa của nó.

Nếu bạn muốn đặt phần tử con ở dưới cùng bên phải, bạn cần chỉ định nó trực tiếp trên phần tử con với right tài sản:

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

Kết quả: