CSS -bottom属性理解/详解
上结论：
当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为负值的时候，向下移动；反之
