CSS bottom 屬性
示例
將 <div> 元素的底部邊緣設定為比其最近的具有定位的父元素的底部邊緣高 10px。
div.absolute {
position: absolute;
bottom: 10px;
width: 50%;
border: 3px solid #8AC007;
}
自己動手試一試 »
定義和用法
bottom 屬性影響已定位元素（positioned element）的垂直位置。該屬性對未定位元素（non-positioned element）沒有效果。
- 如果 position: absolute; 或 position: fixed; -
bottom屬性將元素底邊設定在其最近的已定位祖先元素（positioned ancestor）底邊上方/下方的一個單位。 - 如果 position: relative; -
bottom屬性使元素的底邊在其正常位置上方/下方移動。 - 如果 position: sticky; - 當元素在視口內時，
bottom屬性的行為類似於其 position 為 relative，當元素在視口外時，其行為類似於 position 為 fixed。 - 如果 position: static; -
bottom屬性沒有效果。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| bottom | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
CSS 語法
bottom: auto|length|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 讓瀏覽器計算底部邊緣的位置。這是預設值 | 演示 ❯ |
| length | 設定底部邊緣的位置，單位可以是 px, cm 等。允許負值。 瞭解長度單位 | 演示 ❯ |
| % | 設定底部邊緣的位置，單位是包含元素的 %。允許負值。 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
相關頁面
CSS 教程：CSS 定位
CSS 參考：top 屬性
CSS 參考：left 屬性
CSS 參考：right 屬性
HTML DOM 參考： bottom 屬性
