當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > DIV+CSS > css relative相對(duì)定位屬性

css relative相對(duì)定位屬性

2012/11/27 10:27:24作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例介紹】

css relative相對(duì)定位屬性

采用相對(duì)定位的元素．其位置是相對(duì)于它在文檔中的原始位置計(jì)算而來(lái)的。這意味著．相
對(duì)定位是通過(guò)將元素從原來(lái)的位置向右、向左、向上或向下移動(dòng)來(lái)定位的。采用相對(duì)定位的元
素會(huì)獲得相應(yīng)的空間。

【基本語(yǔ)法】

position：relative

left：auto  |   長(zhǎng)度值   |   百分比
right：auto  |   長(zhǎng)度值  |   百分比
top：auto  |   長(zhǎng)度值  |   百分比
bottom：auto  |   長(zhǎng)度值  |   百分比

【語(yǔ)法介紹】

當(dāng)容器的position屬性值為relative時(shí)，這個(gè)容器即被相對(duì)定位了。相對(duì)定位和其他定位相
似，也是獨(dú)立出來(lái)浮在上面。不過(guò)相對(duì)定位的容器的top(頂部)、bottom(底部)、left(左邊）
和right(右邊)屬性參照對(duì)象是其父容器的4條邊，而不是瀏覽器窗口，并且相對(duì)定位的容器
浮上來(lái)后，其所占的位置仍然留有空位，后面的無(wú)定位容器仍然不會(huì)“擠”上來(lái)

【實(shí)例代碼】


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS相對(duì)定位</title>
<style type="text/css">
*{margin: 0px;
padding:0px;}
#all{
 width:600px;
 height:400px;
 background-color:#CC6;
}
#fixed{
 width:120px;
 height:80px;
 border:10px ridge #f00;
 background-color:#9c9;
 position:relative;
 top:10px;
 left:200px;
}
#a,#b{
 width:200px;
 height:120px;
 background-color:#F9F;
 border:3px outset #000;
}
</style>
</head>
<body>
<div id="all">
<div id="a">第1個(gè)無(wú)定位的div容器</div>
<div id="fixed">相對(duì)定位的容器</div>
<div id="b">第2個(gè)無(wú)定位的div容器</div>
</div>
</body>
</html>
【代碼分析】

這里給外部div設(shè)置了#CC6背景色，并給內(nèi)部無(wú)定位的div設(shè)置了#F9F背景色，而相對(duì)定
位的div容器設(shè)置了#9c9背景色，并設(shè)置了inset類型的邊框，瀏覽效果如圖18．15所示。
相對(duì)定位的容器其實(shí)并未完全獨(dú)立，浮動(dòng)范圍仍然在父容器內(nèi)，并且其所占的空白位置仍
然有效地存在于前后兩個(gè)容器之間。

相對(duì)定位

 【素材及源碼下載】

請(qǐng)點(diǎn)擊：相對(duì)定位(css relative) 下載本實(shí)例相關(guān)素材及源碼

 

標(biāo)簽： css relative  相對(duì)定位  屬性