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

      1. 網頁設計中的固定定位

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

        從上一節可以看出,網站建設中固定定位與絕對定位很類似,只不過固定元素的包含塊是視窗。固定定位時,元素會完全從文檔流中去除,不會有相對于文檔中任何部分的位置。

        網頁設計員可以采用一些有意思的方式充分利用固定定位。首先,可以使用固定定位創建幀式界面??紤]圖10-56,這里顯示了一個相當常見的布局機制。

        圖10-56:使用固定定位模擬幀

        這可以使用以下樣式得到:

        div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;background: gray;}

        div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background: silver;}

        以上樣式會把標題和邊欄固定到視窗的頂部和旁邊,并保持不動,而不論文檔如何滾動。

        不過這樣做的缺點是,文檔的其余部分會被固定元素覆蓋。因此,可能應當把其余內容包含在其自己的div中,并應用以下規則:

        div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0; overflow: scroll; background: white;}

        甚至可以適當地增加外邊距,在三個定位div之間建立一些小縫隙,如圖10-57所示:

        body {background: black; color: silver;}/* colors for safety's sake */

        div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;background: gray; margin-bottom: 2px; color: yellow;}

        div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;

        background: silver; margin-right: 2px; color: maroon;}

        div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0; overflow: auto; background: white; color: black;}

        對于這種情況,網頁設計員可以向body背景應用一個平鋪圖像。這個圖像會透過外邊距創建的縫隙顯示出來,如果創作人員認為合適,還可以使縫隙加寬。

        固定定位的另一個用途是在屏幕上放置一個“永久性”元素,如一個小的鏈接列表。還可以創建一個包含版權和其他信息的永久性頁腳,如下所示:

        div#footer {position: fixed; bottom: 0; width: 100%; height: auto;}

        這會把頁腳放在視窗的底部,并且一直留在那里,而不論文檔如何滾動。

        使用固定定位的一個缺點是,Windows平臺的Internet Explorer在IE7之前對此不提供支持。確實有一些解決辦法可以在較老版本的IE/Win中增加對固定定位的支持,不過這不一定能得到創作人員的認可,因為與完備的固定定位支持相比,這些模擬方法的顯示不太平滑。還有一種辦法是在IE/Win中對元素絕對定位,而在更高級的瀏覽器中使用固定定位,不過這也無法保證對所有布局都可行。

        圖10-57:利用外邊距分隔“幀”

        注意:網站建設要了解如何在較老版本的IE/Win中模擬固定定位,還可以參考http://css-discum.com/?page=EmulatingFixedPositoning (注 1)[1]。

        當前文章標題:網頁設計中的固定定位

        當前URL:http://www.freenetsites.com/news/wzzz/fixed-position.html

        上一篇:網頁設計中Z軸上的放置

        下一篇:網頁設計中的相對定位

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