一、position的属性（5个）
文档流：
文档流指的是元素排版布局过程中，元素会自动从左往右，自上而下的流式布局。
（一）absolute （绝对定位）
1.使元素完全脱离文档流；
2.相对于 static 定位以外的第一个父元素进行定位,且逐层上找，直到document
(二)fixed (固定定位)
固定定位的元素总是相对于浏览器窗口进行定位
固定定位的元素会脱离文档流
(三)relative (相对定位)
相对定位的元素相对于自身偏移
相对定位的元素不会脱离文档流
（四）static (默认定位)
static是position属性的默认值，代表“没有定位”，即元素出现在正常的文档流中。
(五)inherit (不常用)
规定应该从父元素继承 position 属性的值。
对于绝对定位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
border: 0;
padding: 0;
margin: 0;
}
div {font-size: 15px;color: #fff;}
.test1 {width: 500px;height: 500px;background: red;}
/* 如果父级的元素发生了移动，他会根据移动后的位置进行偏移 */
.test2 {width: 400px;height: 400px;background: yellow;position: relative;left: 100px;top: 0px;}
.test3 {width: 300px;height: 300px;background: pink;position: absolute;right: -20px;top: 0px;}
</style>
</head>
<body>
<div class="test1">
test1
<div class="test2">
test2
<div class="test3">test3</div>
</div>
</div>
</body>
</html>总结
1.position: relative;不会脱离文档流，position: fixed;position: absolute;会脱离文档流
2.position: relative; 相对于自己在文档流中的初始位置偏移定位。
3.position: fixed; 相对于浏览器窗口定位。
4.position: absolute; 是相对于父级非position:static 浏览器定位。
- 如果没有任何一个父级元素是非position:static属性，则会相对于文档定位。
- 这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。
- 如果它的父级元素和爷爷级元素都是非position:static 属性，则，它会选择距离最近的父元素。
关于z-index(粗略解释)
z-index只能应用于定位元素(即设置了position属性非static 值).
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
通俗讲就是z-index的值越大，就离我们越近，显示的就靠前。
二、浮动
浮动的定义
使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
脱离文档流的概念
所谓脱离文档流，即将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它
，两者位置重叠都是可以的。
浮动产生的原因
一般是父类盒子中的子盒子设置了float:left或float:right CSS属性，导致父类盒子不能被撑开
，这样就产生了浮动
浮动后对元素产生的影响
造成父元素高度塌陷，致使布局混乱
清除浮动的方法
（一）overflow:hidden
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden
实现的原理为BFC，原理稍后介绍
（二） 在父元素的最后加一个冗余元素并为其设置clear:both
clear 属性设置或返回元素相对浮动对象的位置。（记住clear的属性值）
给这个冗余元素添加clear:both（clear属性介绍），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
.clear{ clear:both;}
</style>
</head>
<body>
<div class="box">
<div class="div"></div>
<div class="clear"></div>
</div>
</body>
</html>（三）使用:before和:after伪元素
.clearfix:before,.clearfix:after{display:table;content:"";}//内容为空，块级表格显示，可用display:block
.clearfix:after{clear:both;}//清除浮动
.clearfix{*zoom:1}（兼容ie 触发haslayout）（推荐）在我们需要清除浮动时，只需要给父元素追加clearfix类即可，既方便又符合语义化。
原理解释
“:before”伪类是用来防止子元素顶部的外边距塌陷，
使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。
“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。
在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的hasLayout的机制。决定了元素怎样渲染内容，以及元素与元素之间的相互影响。
三、position:absolute和float的异同
相同点：
可以让元素脱离文档流，内联元素可以设置宽和高
不同点：
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
