CSS教程:CSS中的定位（position）

2024-07-11 08:43:30

字體：大中小

供稿：網(wǎng)友

　　使用CSS來(lái)定位頁(yè)面內(nèi)層的位置，一直是比較難以掌握的事情，很多時(shí)候，往往被絕對(duì)定位的元素，總是以瀏覽器的左上角為坐標(biāo)原點(diǎn)，此時(shí)，如果瀏覽器的大小改變，被定義的層就會(huì)偏離設(shè)計(jì)想要的位置，讓人很撓頭。
　　其實(shí)，要想控制好層的絕對(duì)定位，只要理解CSS中關(guān)于定位（position）的定義，一切就會(huì)變得輕松簡(jiǎn)單。
　　CSS中關(guān)于定位（position）是這樣定義的：
　　定位（position）允許用戶精確定義元素框出現(xiàn)的相對(duì)位置，可以相對(duì)于它通常出現(xiàn)的位置，相對(duì)于其上級(jí)元素，相對(duì)于另一個(gè)元素，或者相對(duì)于瀏覽器視窗本身。每個(gè)顯示元素都可以用定位的方法來(lái)描述，而其位置由此元素的包含塊來(lái)決定的。
　　包含塊（containingblock）是格式編排發(fā)生的關(guān)聯(lián)場(chǎng)景，例如，一個(gè)加粗的元素的包含塊可以是該元素所出現(xiàn)的段落，如圖1所示。　　

http://files.VeVb.com/file_images/css/2008101719133117177801.gif

　　在理解定位之前，首先，要先理解HTML文件的結(jié)構(gòu)，例如有一個(gè)html文件內(nèi)容如下：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>文檔結(jié)構(gòu)</title>
</head>
<body>
<h1>CSS規(guī)則</h1>
<p>樣式表由一些<strong>樣式規(guī)則</strong>組成。</p>
<ul>
<li>選擇符
<ul>
<li>類選擇符</li>
<li>ID選擇符</li>
<li><em>包含</em>選擇符</li>
</ul>
</li>
<li>屬性</li>
<li>值</li>
</ul>
</ul>
</body>
</html>
　　此文檔對(duì)應(yīng)的樹(shù)型結(jié)構(gòu)，如圖2所示。

http://files.VeVb.com/file_images/css/2008101719133121877802.gif

　　CSS大部分能力是基于元素的“父子”關(guān)系，在圖2的家族樹(shù)中，每個(gè)元素都是另一個(gè)元素的“父”或者“子”或者2者都是。例如：body既是html的子元素，又是h1的父元素，而html就是h1的祖先，h1則是html的子孫。
　　Body是所有瀏覽器能顯示的元素的祖先，而html是所有元素的祖先，也稱為“根元素”。
　　那為什么定位了的元素還總是以瀏覽器窗口的左上角為坐標(biāo)呢？
　　因?yàn)椴⒉皇敲總€(gè)元素都能為其后輩元素生成一個(gè)包含塊。
　　建立包含塊的規(guī)則如下：
　　1.根元素”的包含塊（也叫初始包含塊）由用戶代理生成，在HTML中，根元素是HTML元素，盡管有的瀏覽器會(huì)不正確地使用body元素。
　　2.對(duì)于那些未絕對(duì)定位的非根元素來(lái)說(shuō)，元素的包含塊設(shè)置為最近的塊級(jí)祖先元素的內(nèi)容區(qū)邊沿。
　　3.對(duì)那些使用絕對(duì)（absolute）作為定位（postition）的非根元素，包含塊設(shè)為最近的定位（postition）不是靜止（static）的祖先元素（任何類型）。有以下幾種情況：
　　a.如果祖先元素是塊級(jí)（block）元素，包含塊設(shè)為祖先元素的填充（padding）邊沿，也就是被邊框（border）約束的區(qū)域
　　b.如果祖先元素是內(nèi)聯(lián)（inline）元素，包含塊設(shè)為祖先元素的內(nèi)容邊沿。
因此，絕對(duì)定位的元素往往以瀏覽器可視區(qū)域的左上為坐標(biāo)原點(diǎn)來(lái)進(jìn)行定位了。
　　在CSS中可是使用position屬性來(lái)在不同的定位類型中選擇。
　　語(yǔ)法：
　　position:static|absolute|fixed|relative|inherit
　　其各參數(shù)含義是：
　　static:靜態(tài)（默認(rèn)），無(wú)特殊定位。
　　relative:相對(duì)，對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置
　　absolute:絕對(duì)，將對(duì)象從文檔流中拖出，通過(guò)width、height、left，right，top，bottom等屬性與margin、padding、border進(jìn)行絕對(duì)定位，絕對(duì)定位的元素可以有邊界，但這些邊界不壓縮。而其層疊通過(guò)z-index屬性定義。
　　fixed:懸浮，使元素固定在屏幕的某個(gè)位置，其包含塊是可視區(qū)域本身，因此它不隨滾動(dòng)條的滾動(dòng)而滾動(dòng)。（IE5.5 不支持此屬性。）
　　inherit:這個(gè)值從其上級(jí)元素繼承得到。

　　示例：
div{
position:absolute;
bottom:1in;
left:1in;
right:1in;
top:1in;
}
div{
position:relative;
top:-3px;
left:6px;
}
　　既然了解了包含塊的概念，那么對(duì)于相對(duì)定位和絕對(duì)定位的關(guān)系，就很好掌握了。
　　例如，現(xiàn)在需要把頁(yè)面內(nèi)容整體居中，然后再將其中某些層絕對(duì)定位的話，那就要把最外面的層設(shè)置定位屬性。
<body>
<divid="box">
<divid="nav">
<p>每個(gè)顯示元素都可以用定位的方法來(lái)描述，而其位置由此元素的<strong>包含塊</strong>來(lái)決定的。</p>
</div>
</div>
</body>
　　此時(shí)，如果你要對(duì)nav絕對(duì)定位，則需設(shè)置css：
body{
margin:0;
padding:0;
text-align:center;
}
#box{
background:#ff0;
position:relative;/*使box層成為其子孫元素的包含塊*/
width:500px;
height:200px;
margin:0auto;
}
#nav{
background:#ccc;
position:absolute;/*nav層將在box層的邊框范圍內(nèi)絕對(duì)定位*/
top:20px;
left:40px;
width:200px;
}
　　其顯示效果如圖3所示。