在進行網頁設計時，經常會遇到一種情況，就是當內容的高度超過一定限制時，底部的按鈕會被覆蓋，影響用戶體驗。在這種情況下，我們應該如何解決呢？
這時我們可以使用 CSS 中的一個屬性——`position`。該屬性有三個值可選：`static`、`relative` 和 `absolute`。
其中，`static`是默認值，表示元素的位置遵循正常文檔流；`relative` 表示元素的位置相對于其自身位置進行定位；`absolute` 表示元素的位置相對于其最近的非 `static` 定位祖先元素進行定位。
我們可以通過`position: relative;`來讓底部按鈕相對于其原本的位置上移一定高度：
```
button {
position: relative;
bottom: 20px; /* 上移20px */
}
```
如果我們需要讓按鈕始終位于頁面底部，我們可以將它的定位屬性設置為`absolute`，并將其放置在具有確定高度的容器中（如`
`），然后使用如下代碼：
```
.container {
position: relative;
height: 400px;
}
button {
position: absolute;
bottom: 0;
}
```
在這里，我們添加了一個高度為400px的容器`
`，讓按鈕始終位于容器底部。由于按鈕的`position`屬性被設置為`absolute`，因此它將相對于最近的具有定位屬性（這里就是容器）進行定位。
以上就是對 CSS 中處理內容高于底部按鈕的方法的介紹。在實際開發中，可以根據具體需求來靈活運用。
上一篇css 內嵌和外部引入
下一篇css 內容頁