上一節(jié)介紹了網(wǎng)頁(yè)設(shè)計(jì)三種定位機(jī)制使用了4個(gè)屬性來(lái)描述定位元素各邊相對(duì)于其包含塊的偏移。我們將這4個(gè)屬性稱(chēng)為偏移屬性，這對(duì)于完成定位是很重要的一部分。
top、right、bottom、left
值：<length>| <percentage> | auto | inherit
初始值：auto
應(yīng)用于：定位元素（也就是position值不是static的元素）
繼承性：無(wú)
百分?jǐn)?shù)：對(duì)于top和bottom，相對(duì)于包含塊的高度；對(duì)于right和left，相對(duì)于包含塊的寬度
計(jì)算值：對(duì)于相對(duì)定位元素，見(jiàn)以下說(shuō)明，對(duì)于static元素為auto，對(duì)于長(zhǎng)度值，是相應(yīng)的絕對(duì)長(zhǎng)度；對(duì)于百分?jǐn)?shù)值，則為指定的值；否則，為 auto
說(shuō)明：計(jì)算值取決于一系列因素，見(jiàn)附錄A中的相關(guān)例子
這些屬性描述了距離包含塊最近邊的偏移（所以得名offset）。例如，top描述了網(wǎng)站建設(shè)定位元素上外邊距邊界離其包含塊的頂端多遠(yuǎn)。如果top為正值，會(huì)把定位元素的上外邊距邊界下移，若為負(fù)值，則會(huì)把定位元素的上外邊距移到其包含塊的頂端之上。類(lèi)似地，left描述了定位元素的左外邊距邊界在其包含塊左邊界右邊（正值）或左邊（負(fù)值）有多遠(yuǎn)。如果是正值，會(huì)把定位元素的外邊距邊界移到包含塊左邊界右邊，而負(fù)值則將其移到包含塊左邊界左邊。
還可以這樣來(lái)講，正值會(huì)導(dǎo)致向內(nèi)偏移，使邊界朝著包含塊的中心移動(dòng)，而負(fù)值會(huì)導(dǎo)致向外偏移。
注意：最初的網(wǎng)站建設(shè)CSS2規(guī)范實(shí)際上指出，偏移的是內(nèi)容邊界，而不是外邊距邊界，不過(guò)這與CSS2的其他部分不一致。這個(gè)錯(cuò)誤在后來(lái)的勘誤和CSS2.1中得到修正。所有當(dāng)前開(kāi)發(fā)的瀏覽器（寫(xiě)作本書(shū)時(shí)）都使用外邊距邊界來(lái)完成偏移計(jì)算。
偏移定位元素的外邊距邊界時(shí)，帶來(lái)的影響是元素的所有一切（包括外邊距，邊框、內(nèi)邊距和內(nèi)容）都會(huì)在定位的過(guò)程中移動(dòng)。因此，可以為定位元素設(shè)置外邊距、邊框和內(nèi)邊距，這些會(huì)隨著定位元素一直保留，并包含在偏移屬性定義的區(qū)域內(nèi)。
網(wǎng)頁(yè)設(shè)計(jì)人員要記住重要的一點(diǎn)，偏移屬性定義了距離包含塊相應(yīng)邊的偏移（例如，left定義了距離包含塊左邊的偏移），而不是距包含塊左上角的偏移。正是因?yàn)檫@個(gè)原因，填充一個(gè)包含塊的右下角時(shí)要使用以下值：
top: 50%; bottom: 0; left: 50%; right: 0;
在這個(gè)例子中，定位元素的左外邊界放在包含塊中間的位置上，這是距包含塊左邊界的偏移。不過(guò)，定位元素的右外邊界沒(méi)有從包含塊的右邊界偏移，所以二者不矛盾。定位元素的頂端和底端也是如此：外上邊界放在包含塊中間的位置上，但是外下邊界沒(méi)有從包含塊底端上移。這就得到了如圖10-26所示的結(jié)果。
圖10-26：填充包含塊的右下1/4部分
注意：在圖10-26以及本章大多數(shù)例子中，都是基于絕對(duì)定位的，由于絕對(duì)定位對(duì)于展示top、right、bottom和left如何工作是最簡(jiǎn)單的機(jī)制，所以我們一直都會(huì)用絕對(duì)定位。
需要說(shuō)明，網(wǎng)頁(yè)設(shè)計(jì)定位元素的背景色稍有不同。圖10-26中沒(méi)有外邊距，但是如果確實(shí)有外邊距，在邊框和偏移邊界之間就會(huì)出現(xiàn)空白?？瓷先ゾ秃孟穸ㄎ辉貨](méi)有完全填充包含塊右下方1/4部分一樣。實(shí)際上，它確實(shí)填滿了這個(gè)區(qū)域，不過(guò)人眼不能直接看出。因此，以下兩組樣式會(huì)得到幾乎相同的外觀效果，假設(shè)包含塊為100em高，100em寬：
top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em;
top: 60%; bottom: 10%; left: 60%; right: 10%; margin: 0;
重申一句，二者只是在視覺(jué)效果上相似。
通過(guò)使用負(fù)值，可以將一個(gè)元素定位到其包含塊之外，例如，指定以下值會(huì)得到如圖10-27所示的結(jié)果：
top:-5em; bottom: 50%; left: 75%; right:-3em;
圖10-27：將一個(gè)元素定位到其包含塊之外
除了長(zhǎng)度值和百分?jǐn)?shù)值，網(wǎng)頁(yè)設(shè)計(jì)的偏移屬性還可以設(shè)置為auto，這是默認(rèn)值。對(duì)于auto沒(méi)有定義行為，它會(huì)根據(jù)所用的定位類(lèi)型改變。本章后面將逐個(gè)考慮各種定位類(lèi)型，并介紹auto如何作用。