一、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脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。
