Style bottom 屬性

定義和用法

bottom 屬性設置或返回定位元素的底部位置。

提示：定位元素指的是 position 屬性設置為：relative、absolute 或 fixed 的元素。

提示：如需設置或返回定位元素的頂部位置，請使用 top 屬性。

另請參閱：

CSS 教程：CSS 定位

CSS 參考手冊：bottom 屬性

實例

例子 1

設置 <button> 元素的底部位置：

document.getElementById("myBtn").style.bottom = "100px";

親自試一試

例子 2

設置 <div> 元素的底部位置：

document.getElementById("myDiv").style.bottom = "10px";

親自試一試

例子 3

使用負值 - 設置 <div> 元素的底部位置：

document.getElementById("myDiv").style.bottom = "-100px";

親自試一試

例子 4

返回 <div> 元素的底部位置：

alert(document.getElementById("myDiv").style.bottom);

親自試一試

語法

返回 bottom 屬性：

object.style.bottom

設置 bottom 屬性：

object.style.bottom = "auto|length|%|initial|inherit"

屬性值

值 描述
auto 讓瀏覽器設置底部位置。默認。
length 以長度單位定義底部位置。允許負值。
% 以父元素高度的百分比設置底部位置。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： auto
返回值： 字符串，表示定位元素的底部位置。
CSS 版本： CSS2

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持