css bottom属性 使元素位置相对固定

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
简单来说 bottom:5px;就是对一个元素进行定位，它的位置参照的谁让这个元素距离参照物底部5px的距离保持不变，参照物变大变小都不会影响它的相对位置。
示例：

<style> 
#div1
        {
            position: relative;
            height: 200px;
            width: 80%;
            background-color: skyblue;
        }
        #div2
        {
            position: absolute;
           bottom:10px;
            height: 30px;
            width: 100%;
            background-color: lightgreen;
        }
    </style>
<div id="div1">
	<div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
	</div>
</div>

效果如图：

绿色div始终在距离蓝色div底部10px的位置。
注意 ：蓝色div宽度80%是相对于body，而绿色div是absolute绝对定位，参照蓝色定位来设置的，宽度100%即相对于蓝色div所占的百分比。