static默认定位方式
默认值。元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或多个矩形框，置于其父元素中。
relative相对定位
相对该元素应当显示的左上角重新定位，虽然脱离了标准流，但它原来的空间不能被占用。
Snip20170102_1.png
//html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="1_positon.css">
</head>
<body>
<div class="div1">内容1</div>
<div id="spe" class="div1">内容2</div>
<div class="div1">内容3</div>
<div class="div1">内容4</div>
</body>
</html>
//css文件
.div1{
width: :70px;
height: 30px;
background: silver;
float: left;
margin-left: 5px
}
#spe{
position: relative;
left:40px;
top:100px;
}
absolute绝对定位
是指对该元素最近的那个脱离的标准流的元素定位，如果没有父元素，则相对body左上角定位
Snip20170102_2.png
注意：如果决定定位的这个元素的父元素脱离了标准流，那么设定位置将是相对于他的父元素，如图：
Snip20170102_3.png
//只贴出关键代码
//html文件
<div class="div2">
<div id="spe" class="div1">
内容2
</div>
</div>
//只贴出关键代码
//css文件
.div2{
position: relative;
width: 200px;
height: 150px;
left: 100px;
top: 100px;
background:pink;
float: left;
}
#spe{
position: relative;
left:40px;
top:100px;
}
fix固定定位
元素框的表现类似于将position设置为absolute,不过其参考系是视窗本身。
z-index层级设置
值小则会在底层
Snip20170102_5.png
