引子：相对定位和绝对定位的区别
static:静态定位，元素定位的默认值，表示元素在文档流中正常存在的位置，忽略各种定位值如top left等和z-index
relative：相对定位，相对的是元素本来在文档流中的初始位置。通过设置top、left等定位属性来设置元素相对于自身位置的偏移。
写个代码：
页面：
<div class="main">
<div class="parent">
</div>
</div>
样式：
.main{
width:500px;
background:#00f;
}
.parent{
position:relative;
right:0;
bottom:0;
background:red;
height:300px;
width:300px;
}
image.png
是不是觉得和预期的不太一样，红色块应该右边对齐蓝块啊，别急，我们将right:0 bottom:0改为right:10px;bottom:10px看一下
image.png
红色块相对于自己原来的位置向上向右移动了10px，这就是为什么说top、left、right、bottom设置的值是元素相对于自身的偏移。
相对定位的元素，可以设置z-index的值，即使不设置，元素也会显示在静态定位的元素上方。
absolute：绝对定位，相对的是其最近的定位为relative或者absolute的父元素。通过设置top、left、right、bottom等设置其相对于父元素的定位。注意，absolute不会相对于定位为float的元素偏移。
fixed：固定定位，相对的是视窗或者浏览器窗口。页面滚动时，视窗是不会改变的，所以固定定位的元素位置不会发生改变。
