CSS相對絕對定位 總結
沒有定位：static
相對定位：relative
絕對定位：absolute、fixed
什麼是文件流？
將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流。(自上而下，自左向右)
在文件流的：relative、
未完全脫離文件流的：浮動
脫離文件流的：absolute、fixed
float 究竟有沒有脫離文件流，為什麼文字會圍繞在float元素周圍，而塊狀元素依然會忽略float元素？
只能說明：float 未完全脫離文件流。
一、解釋
1、position: static
這個是元素的預設定位方式，元素出現在正常的文件流中，會佔用頁面空間。不能使用top，bottom，left，right和z-index。
2、position: relative
（1）相對於其父級元素所剩餘的未被佔用的空間進行定位（在父元素由多個相對定位的子元素時可以看出），
（2）且會佔用該元素在文件中初始的頁面空間，即在使用top，bottom，left，right進行移動位置之後依舊不會改變其所佔用空間的位置。可以使用z-index進行在z軸方向上的移動。
www3school裡的解釋
3、position:absolute
（1）以最近的且不是static定位的祖先元素作為參考進行定位，如果其所有的父級元素都是static定位，那麼此元素最終則是以當前視窗作為參考進行定位(body)。可以使用top，bottom，left，right進行位置移動，亦可使用z-index在z軸上面進行移動。
（2）脫離文件流，不會佔用頁面空間。
（3）absolute使用margin時，不管它有沒有已經定位的祖先元素，都會以它原來所在文件流中的位置作為參照。此時margin-top、margin-bottom不再對文件流中的元素產生影響，因為該元素已經脫離了文件流。對於relative、absolute、fixed定位元素，使用 left、right、top、bottom屬性與margin屬性混合使用會產生累加效果。
4、position: fixed
position: fixed直接以瀏覽器視窗作為參考進行定位。其它特性同absolute定位。
注意：
（1）對於relative、absolute、fixed定位元素，使用 left、right、top、bottom屬性與margin屬性混合使用會產生累加效果。
（2）像span這類inline元素，在普通文件流裡是無法設定width和height的。
但如果將該span元素設定為 absolate、fixed 或 float後【relative不行】，inline元素將會自動轉換為block元素, 因而此時再設定width和height就會生效。（這個block由於浮動或脫離文件流的原因，導致前後的換行符失去了效果，所以有些人誤認為是轉化為了inline-block）
（3）absolute定位物件在可視區域之外會導致滾動條出現。而放置relative定位物件在可視區域之外，滾動條不會出現。
（4）absolute定位忽略padding，相對位置為相對定位容器的左上角內邊框
(見下圖)
二、例子說事
例1、position: relative; left:0px(或right:0px)
<style>
*{margin: 0;padding: 0;}
#div{
width: 300px;
height: 300px;
background:#ccc;
position: relative;/*或者position: absolute;*/
left: 50%;
margin-left: -150px;
}
#div span{
background: orange;
}
#child{
position: relative;
top:0;
left: 0;/*換為right: 0; 輸出效果一樣*/
background: green;
width: 100px;
height: 100px;
}
</style>
<body>
<div id="div">
<span>1dadada1</span>
<div id=child></div>
<a href="">asdasdasdadad</a>
</div>
</body>效果：
div#child的 left: 0 或 right: 0 ，輸出都效果一樣。
說明 相對定位相對於其父級元素所剩餘的未被佔用的空間進行定位；
例2、position: relative; right:100px;
將例1程式碼修改為如下，其他不變。
#child{
position: relative;
top:0;
right:100px;
background: green;
width: 100px;
height: 100px;
}效果：
說明 相對定位相對於其父級元素所剩餘的未被佔用的空間進行定位；相對定位 佔用該元素在文件中初始的頁面空間，且在使用top，bottom，left，right進行移動位置之後依舊不會改變其所佔用空間的位置。
例3、position:absolute; left:0px;
將例1程式碼修改為如下，其他不變。
#child{
position: absolute;
top:0;
left: 0;
background: green;
width: 100px;
height: 100px;
}效果：
說明 其脫離文件流，不會佔用頁面空間。
例4、position:absolute; right:0px;
將例1程式碼修改為如下，其他不變。
#child{
position: absolute;
top:0;
right: 0;
background: green;
width: 100px;
height: 100px;
}效果：
說明 它是以最近的 且不是static定位的父級元素作為參考進行定位的。
例5、position:absolute; top:60px;margin-top: 70px;
將例1程式碼修改為如下，其他不變。
#child{
position: absolute;
top:60px;
left: 0;
margin-top: 70px;
background: green;
width: 100px;
height: 100px;
}效果：
說明 absolute使用margin時，不管它有沒有已經定位的祖先元素，都會以它原來所在文件流中的位置作為參照。此時margin-top、margin-bottom不再對文件流中的元素產生影響，因為該元素已經脫離了文件流。對於relative、absolute、fixed定位元素，使用 left、right、top、bottom屬性與margin屬性混合使用會產生累加效果。
例6、position:fixed; right:0px;
將例1程式碼修改為如下，其他不變。
#child{
position: fixed;
top:0;
right: 0;
background: green;
width: 100px;
height: 100px;
}效果：
說明position: fixed直接以瀏覽器視窗作為參考進行定位。其它特性同absolute定位。
例7、position:fixed; top:10px;margin-top: 20px;
將例1程式碼修改為如下，其他不變。
#child{
position: fixed;
top:30px;
left: 0;
margin-top: 20px;
background: green;
width: 100px;
height: 100px;
}效果：說明對於relative、absolute、fixed定位元素，使用 left、right、top、bottom屬性與margin屬性混合使用會產生累加效果。
