一、position:absolute(绝对定位)
html代码：
css代码： {
position:absolute;
left:100px;/*左边线距离左边框100px*/
top:100px;/*上边线距离上边框100px*/
}
注意的是我们可以吧left top 换成 right 或者 bottom
还有有自带一个margin的8px我们可以通过css样式把他解决
*{
margin:0px;
padding:0px;
}
性质：1.当一个元素使用绝对定位的时候，它会脱离原来的层，不占据里面空间 2.相当于给最近的父级进行定位，如果没有这样定位的父元素，相当于进行了文档定位
html代码：
<div class="box1"></div>
<div class="box2"></div>
css代码：
*{
margin:0px;
padding:0px;
}
.box1{
position:absolute;
width:100px;
height:100px;
background-color:red;
}
.box2{
width:500px;
height:500px;
background-color:yellow;
}
效果图：
二、position：relative（相对定位）
注意：和绝对定位的作用差不多，都可以设置left,right,top,bottom,来给盒子定位、 相对定位是相对于原来自己出生的位置进行定位。
html代码：
<div class="box">one</div>
<div class="box box2">two</div>
<div class="box">three</div>
<div class="box">four</div>
css代码：
.box{
background:red;
width:100px;
height:100px;
float:left;
margin:5px;
}
.box2{
position:relative;
top:50px;
left:50px;
}
效果图：
三、静态定位（static）
说明：一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准。
四、固定定位（fixed）
说明：固定定位于绝对定位相似，但是相对于浏览器窗口定位，并且不会随着二滚动条进行滚动。
固定定位的最常见用途是在页面中创建一个固定头部、固定脚步或者固定侧边栏目，完全不需要使用margin border padding实现
