上結論：
當position為relative時，元素是以它在bottom為0時的位置為參照物進行垂直方向的上下移動；當bottom值為負數，元素向下移動，反之；
當position為absolute時，元素的移動是以包含它的元素為參照物，以bottom=0的時候進行移動；當bottom值為負數，元素向下移動，反之；
代碼先，首先設置這樣一個div塊
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>CSS bottom屬性詳解-CSS教程</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test{ position: relative; width:200px; height:200px; padding:5px 10px; background:#c00; color:#fff; line-height:12; } </style> </head> <body> <div class="test">我是一個test</div> </body> </html>
先不設置它的bottom屬性；打開瀏覽器一看：
可以看到它的位置是這樣的；加上bottom: 100px;
可以看到tset塊上移了；
設置bottom為-100px;如圖：
可得出結論：
當position為relative時，元素是以它在bottom為0時的位置為參照物進行垂直方向的上下移動；當bottom值為負數，元素向下移動，反之；
下面是position為absolute的實驗；
當position：absolute;不設置bottom值
設置bottom:0px;
設置bottom：-100px;
設置bottom：100px
可以得出結論：當position為absolute時，元素的移動是以包含它的元素為參照物，以bottom=0的時候進行移動
當bottom為負值的時候，向下移動；反之