<output id="jbxdv"></output>

      1. 網頁設計中的相對定位

        • 2019-03-25 17:16:13
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

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

        從表面看來,似乎這就足夠了。假設希望將一個圖像向上向左移動。圖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.freenetsites.com/news/wzzz/relative-positioning.html

        上一篇:網頁設計中的固定定位

        下一篇:網頁設計中的表布局

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>