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

CSS布局浮動(dòng)(float)和定位(position)屬性的區(qū)別和應(yīng)用

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

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

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

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

hover時(shí)取當(dāng)前元素為保留位置，定義一個(gè)relative時(shí)，沒(méi)有hover時(shí)使用float清空保留位置。

比較示例中的3個(gè)樣式表，就可以發(fā)現(xiàn)：

<!--<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排版的區(qū)別
3. CSS布局中float和position屬性使用技巧
4. 詳解CSS定位屬性Position用法
5. 鼠標(biāo)經(jīng)過(guò)時(shí)改變DIV背景顏色的三種途徑