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

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

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

圖10-58：相對定位元素

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

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

圖10-59：相對定位元素

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

當然，還可以移動一個相對定位元素，讓它覆蓋其他內(nèi)容。例如，以下樣式和標記的結(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：相對定位元素可以覆蓋其他內(nèi)容

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

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

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

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

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

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

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

小結(jié)

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

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

　　【注釋】

　　[1]　注1：這里確實把“positioning”錯拼成了“Positoning”，不過這只是在英語拼法上有問題，這個頁面本身還是提供了不錯的信息。