bottom · CSS基礎

## bottom 屬性 ### 屬性定義及使用說明對于絕對定位元素，bottom屬性設置單位高于/低于包含它的元素的底邊。對于相對定位元素，bottom屬性設置單位高于/低于其正常位置的元素的底邊。 **注意**：如果"position：static"，底部的屬性沒有任何效果。 **說明**：對于 static 元素，為 auto；對于長度值，則為相應的絕對長度；對于百分比數值，為指定值；否則為 auto。對于相對定義元素，如果 bottom 和 top 都是 auto，其計算值則都是 0；如果其中之一為 auto，則取另一個值的相反數；如果二者都不是 auto，bottom 將取 top 值的相反數。 JavaScript 語法：object.style.bottom="50px" * * * ## 屬性值 | 值 | 描述 | | --- | --- | | auto | 默認值。通過瀏覽器計算底部的位置。 | | *%* | 設置以包含元素的百分比計的底邊位置。可使用負值。 | | *length* | 使用 px、cm 等單位設置元素的底邊位置。可使用負值。 | | inherit | 規定應該從父元素繼承 bottom 屬性的值。 | * * * ## 實例--設置圖像的底部邊緣，在元素的底邊上面5px： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> img.ex1 { position:absolute; bottom:0px; } img.ex2 { position:relative; bottom:-100px; } </style> </head> <body> <img class="ex1" src="/attachments/cover/cover_css.png" width="95" height="84"> <h1>This is a heading</h1> <img class="ex2" src="/attachments/cover/cover_css.png" width="95" height="84"> </body> </html> ```