CSS網(wǎng)頁布局：關(guān)于定位（position）

互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:24:27 作者：佚名

使用CSS來定位頁面內(nèi)層的位置，一直是比較難以掌握的事情，很多時候，往往被絕對定位的元素，總是以瀏覽器的左上角為坐標(biāo)原點(diǎn)，此時，如果瀏覽器的大小改變，被定義的層就會偏離設(shè)計想要的位置，讓人很撓頭。其實，要想控制好層的絕對定位，只要理解CSS中關(guān)于定位（position

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

在理解定位之前，首先，要先理解HTML文件的結(jié)構(gòu)，例如有一個html文件內(nèi)容如下：

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

</head>

<body>

<p>樣式表由一些<strong>樣式規(guī)則</strong>組成。</p>

<ul>

<li>選擇符

<ul>

<li>ID選擇符</li>

</ul>

</li>

</ul>

</body>

</html>
此文檔對應(yīng)的樹型結(jié)構(gòu)，如圖2所示。
html文檔樹結(jié)構(gòu)

CSS大部分能力是基于元素的“父子”關(guān)系，在圖2的家族樹中，每個元素都是另一個元素的“父”或者“子”或者兩者都是。例如：body既是html的子元素，又是h1的父元素，而html就是h1的祖先，h1則是html的子孫。
Body是所有瀏覽器能顯示的元素的祖先，而html是所有元素的祖先，也稱為“根元素”。
那為什么定位了的元素還總是以瀏覽器窗口的左上角為坐標(biāo)呢？
因為并不是每個元素都能為其后輩元素生成一個包含塊。
建立包含塊的規(guī)則如下：

“根元素”的包含塊（也叫初始包含塊）由用戶代理生成，在HTML中，根元素是HTML元素，盡管有的瀏覽器會不正確地使用body元素。對于那些未絕對定位的非根元素來說，元素的包含塊設(shè)置為最近的塊級祖先元素的內(nèi)容區(qū)邊沿。對那些使用絕對（absolute）作為定位（postition）的非根元素，包含塊設(shè)為最近的定位（postition）不是靜止（static）的祖先元素（任何類型）。有以下幾種情況：

如果祖先元素是塊級（block）元素，包含塊設(shè)為祖先元素的填充（padding）邊沿，也就是被邊框（border）約束的區(qū)域。如果祖先元素是內(nèi)聯(lián)（inline）元素，包含塊設(shè)為祖先元素的內(nèi)容邊沿。關(guān)于包含塊，最重要的是要記住它為所有后輩元素建立了一個格式編排的上下文。另一個重要方面是，元素可定位于它們的包含塊之外。
因此，絕對定位的元素往往以瀏覽器可視區(qū)域的左上為坐標(biāo)原點(diǎn)來進(jìn)行定位了。
在CSS中可是使用position屬性來在不同的定位類型中選擇。
語法：
position : static | absolute | fixed | relative | inherit
其各參數(shù)含義是：
static : 靜態(tài)（默認(rèn)），無特殊定位。 relative : 相對，對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置 absolute : 絕對，將對象從文檔流中拖出，使用left，right，top，bottom等屬性進(jìn)行絕對定位。而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補(bǔ)白和邊框。 fixed : 懸浮，使元素固定在屏幕的某個位置，其包含塊是可視區(qū)域本身，因此它不隨滾動條的滾動而滾動。（IE5.5 不支持此屬性。） inherit : 這個值從其上級元素繼承得到。示例：

div{position:absolute;bottom:1in;left:1in;right:1in;top:1in;}

div{position:relative;top:-3px;left:6px;}
既然了解了包含塊的概念，那么對于相對定位和絕對定位的關(guān)系，就很好掌握了。
例如，現(xiàn)在需要把頁面內(nèi)容整體居中，然后再將其中某些層絕對定位的話，那就要把最外面的層設(shè)置定位屬性。

<body>

<divid="box">

<divid="nav">

<p>每個顯示元素都可以用定位的方法來描述，而其位置由此元素的<strong>包含塊</strong>來決定的。</p>

</div>

</body>
此時，如果你要對nav絕對定位，則需設(shè)置css：

body{