• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 網(wǎng)頁設(shè)計中的相對定位

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

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

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

        圖10-58:相對定位元素

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

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

        圖10-59:相對定位元素

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

        當(dāng)然,還可以移動一個相對定位元素,讓它覆蓋其他內(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é)可以看到,如果相對定位一個元素,它會立即為其所有子元素建立一個新的包含塊。這個包含塊對應(yīng)于該元素原本所在的位置。

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

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

        這里指定的值要求兩種完全不同的行為。如果只考慮top: 10px,則元素應(yīng)當(dāng)向下移10像素,但bottom: 20px則要求元素應(yīng)該向上移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”,不過這只是在英語拼法上有問題,這個頁面本身還是提供了不錯的信息。

        網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點擊可一鍵撥號)
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>