CSS：定位分析

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不兼容）

若是子級有浮動，父級將包不住；