定位的四种方式
1、默认定位：static 其没有top/bottom/left/right属性
2、固定定位：fixed 这个属性是把元素固定在视窗的某个位置，无论你如何滚动页面，该元素都会固定在该位置。
3、相对定位：是相对元素自身的定位，但是该元素用了定位之后，它原来的空间还是存在的，不会被占用，不过个人感觉relative 一般不会单独使用，基本都会和绝对定位一起使用。
html：
css:
.son{
float:left;
width:100px;
height: 100px;
margin:40px;
}
.one{
background: red;
}
.two{
position: relative;
top:100px;
left:50px;
background: green;
}
.three{
background: yellow;
}
那么给第二个元素进行相对定位后，效果图是这样的
4、绝对定位：absolute 要么以一个父级元素进行定位（该父级元素是相对定位），要么就是以所在的浏览器窗口定位，这个是相对于父级元素的绝对定位
html：
css:
.box{
position: relative;
width:200px;
height: 200px;
background: blue;
}
.son{
position:absolute;
width:100px;
height:100px;
background:red;
}
效果：
绝对定位还会遇到层级的问题，如果两个块元素使用了绝对定位
html:
css:
.box{
position: absolute;
width:100px;
height: 100px;
background: blue;
/*z-index: 1000;*/ 改变层级
}
.pad{
position: absolute;
width:100px;
height: 100px;
background: red;
}
用了绝对定位之后两个元素是重合的，效果：
这个就是层级的问题了，其实只要加大下面的元素的层级，z-index:1000就行，那么效果就会显示蓝色
