網站建設里理解起來最簡單的定位機制就是相對定位。采用這種機制時,將通過使用偏移屬性移動定位元素。不過,這可能有一些有意思的后果。
從表面看來,似乎這就足夠了。假設希望將一個圖像向上向左移動。圖10-58顯示了以下樣式的結果:
img (position: relative; top:-20px; left:-20px;}
圖10-58:相對定位元素
這里所做的只是將圖像的上邊界向上偏移20像素,左邊界向左偏移20像素。不過,注意這里的空白,如果該圖像未定位,它本該放在這里。之所以會發生這種情況,原因是當元素相對定位時,它會從其正常位置移走,不過,原來所占的空間并不會因此消失??紤]以下樣式的結果,如圖10-59所示:
em (position: relative; top; 8em; color:.gray;.}
圖10-59:相對定位元素
網頁設計人員可以看到,這個段落里有一些空白。本來這是em元素的位置,而em元素的新位置正好在這個空白的后面。
當然,還可以移動一個相對定位元素,讓它覆蓋其他內容。例如,以下樣式和標記的結果如圖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:相對定位元素可以覆蓋其他內容
從前幾節可以看到,如果相對定位一個元素,它會立即為其所有子元素建立一個新的包含塊。這個包含塊對應于該元素原本所在的位置。
相對定位有一個有意思的小問題。如果一個相對定位元素過度受限會發生什么情況呢?例如:
strong {position: relative; top: 10px; bottom: 20px;}
這里指定的值要求兩種完全不同的行為。如果只考慮top: 10px,則元素應當向下移10像素,但bottom: 20px則要求元素應該向上移20像素。
原來的網站建設CSS2規范沒有說明這種情況下會怎么做,不過CSS2.1指出,如果遇到過度受限的相對定位,一個值會重置為另一個值的相反數。因此,bottom總是等于-top。這意味著前面的例子會處理為就好像做了以下聲明:
strong {position: relative; top: 10px; bottom:-10px;}
因此,strong元素將向下移10像素。規范還允許不同的書寫方向。在相對定位中,right總是等于-left (從左向右讀的語言中),而在從右向左讀的語言中則恰好相反,left總是等于-right.
浮動和定位是網站建設CSS的兩個很吸引人的特性,不過,如果使用時不小心,也會讓人很迷惑。對元素定位時,元素重疊,疊放順序、大小和放置等都需要仔細考慮,另外還必須考慮浮動元素與正常流的關系。因此,使用浮動和定位創建布局需要有所顧忌,不過還是利大于弊。
利用這些特性,很多布局中磽實已經不需要使用表了,不過出于某些原因,Web中還是要使用表,如表示股票行情和運動成績等,下一章我們將介紹CSS做了哪些改進來處理
【注釋】
[1] 注1:這里確實把“positioning”錯拼成了“Positoning”,不過這只是在英語拼法上有問題,這個頁面本身還是提供了不錯的信息。
當前文章標題:網頁設計中的相對定位
當前URL:http://www.ccaudelo.com/news/wzzz/relative-positioning.html
上一篇:網頁設計中的固定定位
下一篇:網頁設計中的表布局