從上一節(jié)可以看出，網(wǎng)站建設(shè)中固定定位與絕對(duì)定位很類似，只不過(guò)固定元素的包含塊是視窗。固定定位時(shí)，元素會(huì)完全從文檔流中去除，不會(huì)有相對(duì)于文檔中任何部分的位置。

網(wǎng)頁(yè)設(shè)計(jì)員可以采用一些有意思的方式充分利用固定定位。首先，可以使用固定定位創(chuàng)建幀式界面?？紤]圖10-56，這里顯示了一個(gè)相當(dāng)常見的布局機(jī)制。

圖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;}

以上樣式會(huì)把標(biāo)題和邊欄固定到視窗的頂部和旁邊，并保持不動(dòng)，而不論文檔如何滾動(dòng)。

不過(guò)這樣做的缺點(diǎn)是，文檔的其余部分會(huì)被固定元素覆蓋。因此，可能應(yīng)當(dāng)把其余內(nèi)容包含在其自己的div中，并應(yīng)用以下規(guī)則：

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

甚至可以適當(dāng)?shù)卦黾油膺吘?，在三個(gè)定位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;}

對(duì)于這種情況，網(wǎng)頁(yè)設(shè)計(jì)員可以向body背景應(yīng)用一個(gè)平鋪圖像。這個(gè)圖像會(huì)透過(guò)外邊距創(chuàng)建的縫隙顯示出來(lái)，如果創(chuàng)作人員認(rèn)為合適，還可以使縫隙加寬。

固定定位的另一個(gè)用途是在屏幕上放置一個(gè)“永久性”元素，如一個(gè)小的鏈接列表。還可以創(chuàng)建一個(gè)包含版權(quán)和其他信息的永久性頁(yè)腳，如下所示:

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

這會(huì)把頁(yè)腳放在視窗的底部，并且一直留在那里，而不論文檔如何滾動(dòng)。

使用固定定位的一個(gè)缺點(diǎn)是，Windows平臺(tái)的Internet Explorer在IE7之前對(duì)此不提供支持。確實(shí)有一些解決辦法可以在較老版本的IE/Win中增加對(duì)固定定位的支持，不過(guò)這不一定能得到創(chuàng)作人員的認(rèn)可，因?yàn)榕c完備的固定定位支持相比，這些模擬方法的顯示不太平滑。還有一種辦法是在IE/Win中對(duì)元素絕對(duì)定位，而在更高級(jí)的瀏覽器中使用固定定位，不過(guò)這也無(wú)法保證對(duì)所有布局都可行。

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

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