你對CSS布局浮動(float)和定位(position)屬性的區別是否熟悉，這里向大家簡單介紹一下，postion:relative是子塊級元素面向父級元素的相對定位，定位關鍵字使用left/right/top/bottom，而float:right/left是子塊級元素流集合面向父級元素的定位，定位的關鍵詞使用margin/padding。

CSS布局浮動(float)和定位(position)屬性的區別和應用

postion:relative是子塊級元素面向父級元素的相對定位，定位關鍵字使用left/right/top/bottom。兄弟塊元素之間相對進行定位，但是position移動后，原位置依然保留。而且隨后的兄弟塊元素定位基于被移走前的位置。

float:right/left是子塊級元素流集合面向父級元素的定位，定位的關鍵詞使用margin/padding。兄弟塊元素之間進行相對的定位均基于移動后的新位置進行重新渲染，可以重疊，原位置被清空。

二者之中最大的差別就是位置保留。

人們也就利用這種差異，可以做出CSS代碼的滑動門菜單。

hover時取當前元素為保留位置，定義一個relative時，沒有hover時使用float清空保留位置。

比較示例中的3個樣式表，就可以發現：

<!--<style> 
*{border:1pxsolid#eee;}  
body{  
border-color:#09f;  
}  
ul{list-style:none;width:800px;height:600px;  
margin:0auto;padding:10px;}  
li{float:left;}  
#li1{width:200px;height:200px;  
border-color:red;}  
#li2{width:200px;height:150px;  
border-color:green;margin-left:-20px;}  
#li3{width:200px;height:100px;  
border-color:blue;margin-left:-20px;}  
</style>--> 
<!--<style> 
*{border:1pxsolid#eee;}  
body{  
border-color:#09f;  
}  
ul{list-style:none;width:800px;  
height:600px;margin:0auto;}  
li{position:relative;}  
#li1{width:200px;height:200px;  
border-color:red;top:10px;}  
#li2{width:200px;height:150px;  
border-color:green;top:-192px;left:180px;}  
#li3{width:200px;height:100px;  
border-color:blue;top:-344px;left:360px;}  
</style>--> 
<style> 
*{border:1pxsolid#eee;}  
body{  
border-color:#09f;  
}  
#ul{list-style:none;width:800px;  
height:600px;margin:0auto;padding:20px;}  
#li1{width:200px;height:200px;  
border-color:red;position:relative;}  
#li2{width:200px;height:150px;  
border-color:green;float:left;  
margin-left:-20px;margin-top:-202px;}  
#li3{width:200px;height:100px;  
border-color:blue;float:left;  
margin-left:20px;margin-top:-202px;}  
</style> 
<ulidulid=#id> 
<liidliid=li1>li1</li> 
<liidliid=li2>li2</li> 
<liidliid=li3>li3</li> 
</ul> 
 

【編輯推薦】

1. CSS中Float和Clear屬性用法
2. 暢談DIV排版和table排版的區別
3. CSS布局中float和position屬性使用技巧
4. 詳解CSS定位屬性Position用法
5. 鼠標經過時改變DIV背景顏色的三種途徑