/

如何使用 CSS 將項目置於容器底部

如何使用 CSS 將項目置於容器底部

學習如何使用 CSS 將項目固定在容器底部

這是一個相當常見的需求，我最近也遇到了這個問題。

我曾經嘗試使用 bottom: 0 給目標元素設定位置，希望將其固定在父元素的底部。

後來發現我漏掉了兩件事：在目標元素上設置 position: absolute，並在父元素上添加 position: relative。

範例代碼：

1
2
3
4
5
6
<div class="container-element">
 ...
 <div class="element-to-stick-to-bottom">
 ...
 </div>
</div>
1
2
3
4
5
6
7
8
.element-to-stick-to-bottom {
 position: absolute;
 bottom: 0;
}

.container-element {
 position: relative;
}

tags: [“CSS”, “positioning”, “layout”]