上结论：
当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为负值的时候，向下移动；反之