position：absolute（絕對定位）\relative(相對定位)\fixed（固定定位）\none;

相對定位(position:relative;)
1.不影響元素本身的特性；
2.不會讓元素脫離標準文件流；
3.如果不設定偏移量，對元素沒有任何影響；
4.定位元素方向控制：top/bottom/left/right;
5.相對定位是相對於自己最開始的位置（相對於自己）進行了偏移；
6.偏移量可正可負；
eg:

<div class="box">box</div>


.box{
	border: 4px solid red;
	width: 200px;
	height:200px;
	position: relative ;
	bottom:50px;/*距原來的底部位置50px,即向上50px*/
	right:50px;	/*距原來的右邊位置50px,即向左50px*/
}
 

絕對定位（position:absolute;）
1.使元素脫離文件流；
2.如果用在內嵌元素上，會使元素支援寬和高；
3.塊屬性標籤內容撐開寬度；
4當多個元素定位，預設後面的元素層級高於前面的元素（覆蓋）；
5.可以用z-index屬性定義層級，層級大的覆蓋層級小的；
6.如果沒有父子盒子，絕對定位是相對於頁面窗體大小來發生偏移的；
7.如果是父子盒子，當前元素是絕對定位，有父級元素定位(無論是相對定位還是絕對定位)
發生偏移，則當前元素就相對於最近的父級（以及父級以上的父級）元素髮生偏移，

在父子盒子中，如果在子盒子新增絕對定位（position:absolute;）則子盒子會脫離標準流，

原來父盒子的元素不一定會覆蓋，如果原來的元素在盒子前面則不會覆蓋，在只有在後面的元素會覆蓋掉
沒有則相對於整個窗體發生偏移；如果有前面和後面的元素，則前面的元素和後面的元素會先顯示
8.相對定位一般配合絕對定位使用；

eg:

<div class="box2">
	A
	<div class="box1">box222</div>
	B
</div>


.box{
	border: 14px solid gray;
	width: 600px;
	height:600px;
	postion：relative；
}
.box1{
	border: 4px solid blue;
	width: 300px;
	height:300px;
	position: absolute;
	background-color: red;
	
}
 

固定定位（position：fixed;IE6以下不支援）
1.使元素脫離文件流；
2.如果用在內嵌元素上，會使元素支援寬和高；
3.塊屬性標籤內容撐開寬度；
4.固定定位不會隨著滾動條滾動；
5.固定定位不受自身父級的影響，
自會固定在當前窗體的某一個位置；

<div class="box">
		<div class="box1">box222</div>
</div>




.box{
	border: 14px solid gray;
	width: 600px;
	height:900px;
	
}
.box1{
	border: 4px solid blue;
	width: 300px;
	height:300px;
	position: fixed;
	background-color: red;
	bottom:0px;
	right: 0px;
	
}

其它定位：position:static;預設值
position:inherit;從父級繼承；//一般不用
定位問題：
position：relative;(相對定位)
在IE6下父級一定包住子級，子級會把父級給撐開；
在其他瀏覽器下子級多餘部分將溢位；在IE6下父級的
overflow是包不住子級的相對定位（relative）；
解決辦法：把父級元素變為定位元素；

position:absolute;

在 IE6 下定位元素的父級寬高都為奇數那麼在
IE6 下定位元素的 right 和 bottom
都有1畫素的偏差。

position:absolute;
絕對定位元素子級的浮動可以不用寫清浮動方法；

position:fixed;
固定定位元素子級的浮動可以不用寫清浮動方法；
（IE6不相容）

如果子級有浮動，父級將包不住；