相对定位
CSS position属性用于指定一个元素在文档中的定位方式。 top ， right ，bottom 和 left 属
性则决定了该元素的最终位置。
相对定位
.box1{
position:relative;/*relative = 相对的意思*/
left:50px;
}
<ul class='wrap'>
<li class='box1'>
<li class='box2'>
</ul>
定义：
相对于元素没有定位之前的位置进行位移！
注意：relative给百分比的问题,父级没有高度的时候，百分比不起作用！
特性
1.不使元素脱离文档流 文档流：正常元素的流体布局，从上至下 这里有两种说法，一种占文档流
自身的位置还在 一种不占文档流确实层级比较高 可以理解成占据自己的位置 同时提高了层级
2.不影响元素本身特性，行内还是行内，块级还是块级
绝对定位
相对于已经定位的父元素进行定位
特性
1.完全脱离文档流
2.行内元素支持宽高
3.块级元素内容撑开宽高
<li class='box'></li>
</li>
</li>
4.没有祖先元素则相对于body
5.一般配合相对定位使用
6.绝对定位的元素的位置相对于最近的已定位祖先元素
7.margin:auto;失效
扩展 如何使一个盒子在页面中百分之百居中呢？
/*第一种方法*/
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
/*第二种方法*/
margin:auto;
position:absolute;
top:0;
eft:0;
right:0;
bottom:0;
固定定位 fixed
相对浏览器窗口定位！
zindex
1.zindex 可以调换两个层的上下位置关系
2.值可以为正，也可以为负，值越大，越在上面 默认值=0
3.只能同级元素对比 你在大楼里面，你自己不能和大楼比谁高！
4.zindex:只对定位的元素有效，其它元素均无效
