CSS布局—定位
1、定位元素的属性：
top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom：定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left：定义了定位元素左外边距边界与其包含块左边界之间的偏移。
right：定义了定位元素右外边距边界与其包含块右边界之间的偏移。
总结：定位属性的top、bottom、left、right都是相对于 相对元素 的相对应边界的距离，利用这个可以设置元素的自适应宽高。如上下高度固定，中间自适应的页面的布局。
参考网站：http://www.cnblogs.com/wfblog/p/8944902.html
固定定位：元素的位置相对于浏览器窗口是固定位置。（脱离标准文档流）
注意：固定定位的元素不是说该元素的某一个点相对于参考元素的元素定位，而是定位元素的四条边相对于参考元素的定位。
如下面的例子中 left、right、top、bottom四个属性的值都是有效果的。
h2
{
position:fixed;
background-color: red;
left:100px;
right: 10px;
top:150px;
bottom: 10px;
}
相对定位：相对定位元素的定位是相对其正常位置。（标准文档流）
相对定位的元素只是位置的改变，大小不会变化。
如下面的例子中，bottom没有效果。
h2
{
position:relative;
background-color: red;
top:150px;
bottom: 10px;
}
绝对定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。（脱离标准文档流）
注意：绝对定位的元素不是说该元素的某一个点相对于参考元素定位，而是定位元素的四条边相对于参考元素的定位。（相对定位，位置改变不会影响元素大小的变化）
如下面的例子中 left、right、top、bottom四个属性的值都是有效果的。
h2
{
position:absolute;
background-color: red;
left:100px;
right: 10px;
top:150px;
bottom: 10px;
}
粘性定位：sticky 定位可以表现出 relative 和 fixed 两种定位结合，正常情况下是 relative，但是当 sticky 元素的父元素（the nearest scrollport，最近的滚动容器）出现滚动条的时候，sticky 元素距离到设置的位置如（top: 0）时会表现为 fixed，相对于 the nearest scrollport 的 fixed。
div.sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: yellow; padding: 50px; font-size: 20px; }
