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