網(wǎng)站建設(shè)里理解起來(lái)最簡(jiǎn)單的定位機(jī)制就是相對(duì)定位。采用這種機(jī)制時(shí)，將通過(guò)使用偏移屬性移動(dòng)定位元素。不過(guò)，這可能有一些有意思的后果。

從表面看來(lái)，似乎這就足夠了。假設(shè)希望將一個(gè)圖像向上向左移動(dòng)。圖10-58顯示了以下樣式的結(jié)果：

img (position: relative; top:-20px; left:-20px;}

圖10-58：相對(duì)定位元素

這里所做的只是將圖像的上邊界向上偏移20像素，左邊界向左偏移20像素。不過(guò)，注意這里的空白，如果該圖像未定位，它本該放在這里。之所以會(huì)發(fā)生這種情況，原因是當(dāng)元素相對(duì)定位時(shí)，它會(huì)從其正常位置移走，不過(guò)，原來(lái)所占的空間并不會(huì)因此消失?？紤]以下樣式的結(jié)果，如圖10-59所示：

em (position: relative; top; 8em; color:.gray;.}

圖10-59：相對(duì)定位元素

網(wǎng)頁(yè)設(shè)計(jì)人員可以看到，這個(gè)段落里有一些空白。本來(lái)這是em元素的位置，而em元素的新位置正好在這個(gè)空白的后面。

當(dāng)然，還可以移動(dòng)一個(gè)相對(duì)定位元素，讓它覆蓋其他內(nèi)容。例如，以下樣式和標(biāo)記的結(jié)果如圖10-60所示：

img.slide {position: relative; left: 30px;}

<p>

In this paragraph, we will find that there is an image that has been pushed to the right. It will therefore <inig src="star.gif" alt=_A star!* class=_sli<ae-> overlap content nearby, assuming that it is not the last element in its line box.

</p>

圖10-60：相對(duì)定位元素可以覆蓋其他內(nèi)容

從前幾節(jié)可以看到，如果相對(duì)定位一個(gè)元素，它會(huì)立即為其所有子元素建立一個(gè)新的包含塊。這個(gè)包含塊對(duì)應(yīng)于該元素原本所在的位置。

相對(duì)定位有一個(gè)有意思的小問(wèn)題。如果一個(gè)相對(duì)定位元素過(guò)度受限會(huì)發(fā)生什么情況呢？例如：

strong {position: relative; top: 10px; bottom: 20px;}

這里指定的值要求兩種完全不同的行為。如果只考慮top: 10px，則元素應(yīng)當(dāng)向下移10像素，但bottom: 20px則要求元素應(yīng)該向上移20像素。

原來(lái)的網(wǎng)站建設(shè)CSS2規(guī)范沒(méi)有說(shuō)明這種情況下會(huì)怎么做，不過(guò)CSS2.1指出，如果遇到過(guò)度受限的相對(duì)定位，一個(gè)值會(huì)重置為另一個(gè)值的相反數(shù)。因此，bottom總是等于-top。這意味著前面的例子會(huì)處理為就好像做了以下聲明：

strong {position: relative; top: 10px; bottom:-10px;}

因此，strong元素將向下移10像素。規(guī)范還允許不同的書(shū)寫(xiě)方向。在相對(duì)定位中，right總是等于-left （從左向右讀的語(yǔ)言中），而在從右向左讀的語(yǔ)言中則恰好相反，left總是等于-right.

小結(jié)

浮動(dòng)和定位是網(wǎng)站建設(shè)CSS的兩個(gè)很吸引人的特性，不過(guò)，如果使用時(shí)不小心，也會(huì)讓人很迷惑。對(duì)元素定位時(shí)，元素重疊，疊放順序、大小和放置等都需要仔細(xì)考慮，另外還必須考慮浮動(dòng)元素與正常流的關(guān)系。因此，使用浮動(dòng)和定位創(chuàng)建布局需要有所顧忌，不過(guò)還是利大于弊。

利用這些特性，很多布局中磽實(shí)已經(jīng)不需要使用表了，不過(guò)出于某些原因，Web中還是要使用表，如表示股票行情和運(yùn)動(dòng)成績(jī)等，下一章我們將介紹CSS做了哪些改進(jìn)來(lái)處理

　　【注釋】

　　[1]　注1：這里確實(shí)把“positioning”錯(cuò)拼成了“Positoning”，不過(guò)這只是在英語(yǔ)拼法上有問(wèn)題，這個(gè)頁(yè)面本身還是提供了不錯(cuò)的信息。