Tìm hiểu cách đặt element ở đáy container của nó với CSS.
HTML có quan hệ cha-con. Để đặt element ở đáy container với CSS, bạn cần dùng các thuộc tính và giá trị sau:
position: relative;(parent/cha)position: absolute;(child/con)bottom: 0;(child/con)
Ví dụ:
<div class="parent"> <div class="child"> </div> </div>.parent { position: relative; } .child { position: absolute; bottom: 0; }Để dễ hình dung, tôi lấy các class CSS từ trên và thêm width, height, màu sắc:
.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 thấy, child element tự động ghim vào bên trái container.
Nếu muốn đặt child element ở góc dưới bên phải, cần chỉ định trực tiếp trên child element với thuộc tính right:
.child { position: absolute; bottom: 0; right: 0; }Kết quả: