CSS bottom 屬性 · W3School CSS 參考手冊

# CSS bottom 屬性 ## 實例把圖像的底邊緣設置在其包含元素底邊緣之上 5 像素高的位置： ``` img { position:absolute; bottom:5px; } ``` ## 瀏覽器支持所有主流瀏覽器都支持 bottom 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 bottom 屬性規定元素的底部邊緣。該屬性定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。注釋：如果 "position" 屬性的值為 "static"，那么設置 "bottom" 屬性不會產生任何效果。 ### 說明對于 static 元素，為 auto；對于長度值，則為相應的絕對長度；對于百分比數值，為指定值；否則為 auto。對于相對定義元素，如果 bottom 和 top 都是 auto，其計算值則都是 0；如果其中之一為 auto，則取另一個值的相反數；如果二者都不是 auto，bottom 將取 top 值的相反數。 | 默認值： | auto | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS2 | | --- | --- | | JavaScript 語法： | _object_.style.bottom="50px" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | auto | 默認值。通過瀏覽器計算底部的位置。 | | _%_ | 設置以包含元素的百分比計的底邊位置。可使用負值。 | | _length_ | 使用 px、cm 等單位設置元素的底邊位置。可使用負值。 | | inherit | 規定應該從父元素繼承 bottom 屬性的值。 | ## TIY 實例 [使用像素值設置圖像的底部邊緣](/tiy/t.asp?f=csse_position_bottom) 本例演示如何使用像素值設置圖像的底部邊緣。 ``` <html> <head> <style type="text/css"> img { position:absolute; bottom:0px } </style> </head> <body> <h1>這是標題</h1> <img class="normal" src="/i/eg_smile.gif" /> <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p> </body> </html> ``` [使用百分比設置圖像的底部邊緣](/tiy/t.asp?f=csse_position_bottom_percent) 本例演示如何使用百分比值設置圖像的底部邊緣。 ``` <html> <head> <style type="text/css"> img { position:absolute; bottom:5% } </style> </head> <body> <h1>這是標題</h1> <img class="normal" src="/i/eg_smile.gif" /> <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 定位](/css/css_positioning.asp "CSS 定位 (Positioning)") HTML DOM 參考手冊：[bottom 屬性](/jsref/prop_style_bottom.asp "HTML DOM bottom 屬性")