你對DIV定位的用法是否熟悉，DIV定位一直是WEB標準應用中的難點，這里向大家簡單描述一下，主要包括無定位，相對定位，絕對定位以及float|浮動對齊等內容，相信本文介紹一定會讓你有所收獲。

DIV定位詳解

1.position:static|無定位

position:static是所有元素定位的默認值,一般不用注明，除非有需要取消繼承的別的DIV定位
example: 

#div-1{  
position:static;  
}  
 

2.position:relative|相對定位

此為DIV定位中的相對定位，使用position:relative，就需要top,bottom,left,right4個屬性來配合，確定元素的位置。
如果要讓div-1層向下移動20px,左移40px:
example: 

#div-1{  
position:relative;  
top:20px;  
left:40px;  
}  
 

如果用到相對定位，緊隨他的層divafter是不會出現在div-1的下方，而是和div-1在同一個高度出現。

可見，position:relative;并不是很好用。

3.position:absolute|絕對定位

此為DIV定位中的絕對定位，使用position:absolute;,能夠很準確的將元素移動到你想要的位置，
讓我將div-1a移動到頁面的右上角:
example: 

#div-1a{  
position:absolute;  
top:0;  
right:0;  
width:200px;  
}  
 

使用絕對定位的div-1a層前面的或者后面的層會認為這個層并不存在，絲毫不影響到他們。所以position:absolute;用于將一個元素放到固定的位置很好用，但是如果需要div-1a層相對于附近的層來確定位置就不要實現了。

◆這里有個winie的bug需要提到，就是如果為絕對定位的元素定義一個相對的寬度，那么在ie下它的寬度取決于父元素的寬度而不是整個頁面的寬度。

4.position:relative+position:absolute|絕對定位+相對定位

如果給父元素(div-1)定義為position:relative;子元素(div-1a)定義為position:absolute，那么子元素(div-1a)的位置將相對于父元素(div-1)，而不是整個頁面。
讓div-1a定位于div-1的右上角：
example: 

<dividdivid="div-1"> 
<dividdivid="div-1a"> 
thisisdiv-1aelement.  
</div> 
thisisdiv-1element.  
</div> 
#div-1{  
position:relative;  
}  
#div-1a{  
position:absolute;  
top:0;  
right:0;  
width:200px;  
}  

#p# 5.twocolumnlayout|兩列布局

讓我們實踐position:relative+position:absolute的理論，實現兩列布局。
example: 

<dividdivid="div-1"> 
<dividdivid="div-1a">thisisthecolumn-one</div> 
<dividdivid="div-1b">thisisthecolumn-two</div> 
</div> 
#div-1{  
position:relative;/*父元素相對定位*/  
}  
#div-1a{  
position:absolute;/*子元素絕對定位*/  
top:0;  
right:0;  
width:200px;  
}  
#div-1b{  
position:absolute;/*子元素絕對定位*/  
top:0;  
left:0;  
width:200px;  
}  

注意，在這個例子中會發現夫元素的告訴不會隨著子元素的告訴變化，所以如果父元素的背景和邊框需要定義一個足夠高的高度才能顯示出來。

6.float|浮動對齊

使用float定位一個元素有float:left;&float:right;兩種值。這種DIV定位只能在水平坐標定位，不能在垂直坐標定位。而且讓下面的元素浮動環繞在它的左邊或者右邊。
example: 

#div-1a{  
float:left;  
width:200px;  
}  
 

7.maketwoclumnwithfloat|浮動實現兩列布局

如果讓一個元素float:left;另一個float:right;控制好他們的寬度，就能實現兩列的布局效果。
example: 

#div-1a{  
float:left;  
width:150px;  
}  
#div-1b{  
float:left;  
width:150px;  
}  

 8.clearfloat|清除浮動

如果你不想讓使用了float元素的下面的元素浮動環繞在它的周圍，那么你就使用DIV定位中的clear,clear有三個值，clear:left;(清除左浮動)，clear:right;(清除右浮動)，clear:both;(清除所有浮動)。
example: 

<dividdivid="div-1a">thisisdiv-1a</div> 
<dividdivid="div-1b">thisisdiv-1b</div> 
<dividdivid="div-1c">thisisdiv-1c</div> 
 
#div-1a{  
float:left;  
width:190px;  
}  
#div-1b{  
float:left;  
width:190px;  
}  
#div-1c{  
clear:both;  
}  

【編輯推薦】

1. 探究DIV定位單元的控制三大元素用法
2. 技術分享 如何實現CSS橫向導航
3. 學習筆記 DIV定位用法詳解
4. DIV定位單元中三大元素的控制
5. DIV CSS解決不規則文字排版問題