fixed元素的絕對位置是相對於HTML元素來說，捲軸是body元素的。
只有記住了這句話，才知為什麼position:absolute;很多地方都給出了結果，但當時並未能解決。因為html被我設定position:relative。是上面這一句啟發了我，最終才能夠解決這個問題。我們拉動捲軸的時候，內容都會隨著視窗滾動；這時滾動的是body。如果讓絕對位置的父級元素定為body，剛我們需要固定的某個模組將會固定在網頁的某個位置，而不是固定在視窗的某個位置（貌似在firefox中，html與body之間的介限並不明確?）。
我們需要做的是，讓body保持其原有高度，讓html只有一個視窗那麼高。代碼我們可以這樣寫：
| 代碼如下 |
複製代碼 |
html{overflow:hidden;} // 重要！
body{height:100%;overflow:auto;}
|
這時，html將只有一個視窗那麼高，超過的，直接hide。而body會隨高度自動變化。這時，我們可以利用絕對位置來定位我們想要固定在視窗某個位置的模組。假設我們要固定的內容在右上方，代碼可以這樣寫：
| 代碼如下 |
複製代碼 |
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#rightform form{position:absolute;right:30px;top50px;} |
這樣，視窗就固定在右上方了。而其他瀏覽器，我們可以用position:fixed;來解決固定的問題。其他瀏覽器完整的代碼如下
| 代碼如下 |
複製代碼 |
#rightform {text-align:center;padding:50px;font:14px/22px Georgia, “Times New Roman”, Times, serif;height:1200px;background:#ffc;}
#rightform h1 {font-family:arial;background:#e8edef;height:300px;line-height:300px;margin-bottom:200px;}
#rightform p {line-height:1.5em;background:#ffdfff;padding:90px 0;}
#rightform form {background-color:#ddd;padding:10px 20px;border:1px solid #aaa;position:fixed;right:30px;top:120px;} |
首先我們來看一段XHTML代碼。
| 代碼如下 |
複製代碼 |
<div id="site_nav">
<h3>歌手庫</h3>
<ul>
<li><a href="#">華語</a>
<ul>
<li><a href="#">女歌手</a></li>
<li><a href="#">男歌手</a></li>
<li><a href="#">樂隊組合</a></li>
</ul>
</li>
<li><a href="#">歐美</a></li>
<li><a href="#">日韓</a></li>
<li><a href="#">其他</a></li>
</ul>
</div>
<div id="content">
右側主體內容
</div> |
頁面由左側菜單和右側主體內容構成，右側內容可能會很多，會出現翻屏。現在是要無論頁面怎麼翻屏滾動，左側的菜單始終在左側。請看CSS解決方案。
| 代碼如下 |
複製代碼 |
#site_nav{position:fixed; width:160px; padding:6px 10px; height:100%;
background:#ffc; overflow-y:auto;}
#content{padding:10px 10px 10px 190px;} |
我設定左側div#site_nav的樣式，將其位置固定，即position:fixed，並且設定固定寬度，高度為100%，為了區分右側內容，我設定了背景顏色background:#ffc。
接著，我將內容部分div#content設定其padding值，注意關鍵是padding-left:190px，只有大於左側菜單寬度的padding值，才能使右側主體內容部分不會與左側菜單重疊
完整執行個體
| 代碼如下 |
複製代碼 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{margin:0; padding:0}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#747d67; background:#fff}
a{color:#528036; text-decoration:none}
a:hover{color:#000; text-decoration:none}
ul{list-style:none}
h1{font-size:16px}
.clear{clear:both} #site_nav{position:fixed; width:160px; padding:6px 10px; height:100%; background:#ffc; overflow-y:auto;}
#site_nav ul{margin:2px}
#site_nav ul li{line-height:22px}
#site_nav ul li ul{padding-left:12px}
#content{padding: 10px 10px 10px 190px;}
#content ul{margin:10px auto} </style>
</head> <body>
<div id="site_nav">
<h1>歌手庫</h1>
<ul>
<li><a href="#">華語</a>
<ul>
<li><a href="#">女歌手</a></li>
<li><a href="#">男歌手</a></li>
<li><a href="#">樂隊組合</a></li>
</ul>
</li>
<li><a href="#">歐美</a></li>
<li><a href="#">日韓</a></li>
<li><a href="#">其他</a></li>
</ul>
</div> <div id="content">
<ul>
<li><a href="#">A ONE</a></li>
<li><a href="#">A-Z樂隊</a></li>
<li><a href="#">A.J.Alex</a></li>
<li><a href="#">ADO</a></li>
<li><a href="#">Airbag</a></li>
<li><a href="#">Ak-47</a></li>
<li><a href="#">阿佳組合</a></li>
<li><a href="#">阿萊樂隊</a></li>
<li><a href="#">阿里郎</a></li>
<li><a href="#">阿里山桃花</a></li>
<li><a href="#">阿吟琴</a></li>
<li><a href="#">阿貓阿狗</a></li>
<li><a href="#">阿妹妹</a></li>
<li><a href="#">愛庫樂團</a></li>
<li><a href="#">愛朵女孩</a></li>
<li><a href="#">安琪兒</a></li>
<li><a href="#">愛樂團</a></li>
<li><a href="#">哎吆樂隊</a></li>
<li><a href="#">城市少女</a></li>
</ul>
<ul>
<li><a href="#">B.A.D</a></li>
<li><a href="#">Beyond</a></li>
<li><a href="#">BOBO組合</a></li>
<li><a href="#">八十八顆芭樂籽</a></li>
<li><a href="#">八隻眼組合</a></li>
<li><a href="#">辦桌二人組</a></li>
<li><a href="#">棒棒堂</a></li>
<li><a href="#">北京天使合唱團</a></li>
<li><a href="#">不複之血樂隊</a></li>
<li><a href="#">薄荷可樂三人組</a></li>
<li><a href="#">病蛹樂隊</a></li>
<li><a href="#">冰火組合</a></li>
<li><a href="#">病醫生樂隊</a></li>
<li><a href="#">北京中央人</a></li>
<li><a href="#">布衣樂隊</a></li>
</ul>
<ul>
<li><a href="#">A ONE</a></li>
<li><a href="#">A-Z樂隊</a></li>
<li><a href="#">A.J.Alex</a></li>
<li><a href="#">ADO</a></li>
<li><a href="#">Airbag</a></li>
<li><a href="#">Ak-47</a></li>
<li><a href="#">阿佳組合</a></li>
<li><a href="#">阿萊樂隊</a></li>
<li><a href="#">阿里郎</a></li>
<li><a href="#">阿里山桃花</a></li>
<li><a href="#">阿吟琴</a></li>
<li><a href="#">阿貓阿狗</a></li>
<li><a href="#">阿妹妹</a></li>
<li><a href="#">愛庫樂團</a></li>
<li><a href="#">愛朵女孩</a></li>
<li><a href="#">安琪兒</a></li>
<li><a href="#">愛樂團</a></li>
<li><a href="#">哎吆樂隊</a></li>
<li><a href="#">城市少女</a></li>
</ul>
<ul>
<li><a href="#">A ONE</a></li>
<li><a href="#">A-Z樂隊</a></li>
<li><a href="#">A.J.Alex</a></li>
<li><a href="#">ADO</a></li>
<li><a href="#">Airbag</a></li>
<li><a href="#">Ak-47</a></li>
<li><a href="#">阿佳組合</a></li>
<li><a href="#">阿萊樂隊</a></li>
<li><a href="#">阿里郎</a></li>
<li><a href="#">阿里山桃花</a></li>
<li><a href="#">阿吟琴</a></li>
<li><a href="#">阿貓阿狗</a></li>
<li><a href="#">阿妹妹</a></li>
<li><a href="#">愛庫樂團</a></li>
<li><a href="#">愛朵女孩</a></li>
<li><a href="#">安琪兒</a></li>
<li><a href="#">愛樂團</a></li>
<li><a href="#">哎吆樂隊</a></li>
<li><a href="#">城市少女</a></li>
</ul>
<ul>
<li><a href="#">A ONE</a></li>
<li><a href="#">A-Z樂隊</a></li>
<li><a href="#">A.J.Alex</a></li>
<li><a href="#">ADO</a></li>
<li><a href="#">Airbag</a></li>
<li><a href="#">Ak-47</a></li>
<li><a href="#">阿佳組合</a></li>
<li><a href="#">阿萊樂隊</a></li>
<li><a href="#">阿里郎</a></li>
<li><a href="#">阿里山桃花</a></li>
<li><a href="#">阿吟琴</a></li>
<li><a href="#">阿貓阿狗</a></li>
<li><a href="#">阿妹妹</a></li>
<li><a href="#">愛庫樂團</a></li>
<li><a href="#">愛朵女孩</a></li>
<li><a href="#">安琪兒</a></li>
<li><a href="#">愛樂團</a></li>
<li><a href="#">哎吆樂隊</a></li>
<li><a href="#">城市少女</a></li>
</ul>
<ul>
<li><a href="#">A ONE</a></li>
<li><a href="#">A-Z樂隊</a></li>
<li><a href="#">A.J.Alex</a></li>
<li><a href="#">ADO</a></li>
<li><a href="#">Airbag</a></li>
<li><a href="#">Ak-47</a></li>
<li><a href="#">阿佳組合</a></li>
<li><a href="#">阿萊樂隊</a></li>
<li><a href="#">阿里郎</a></li>
<li><a href="#">阿里山桃花</a></li>
<li><a href="#">阿吟琴</a></li>
<li><a href="#">阿貓阿狗</a></li>
<li><a href="#">阿妹妹</a></li>
<li><a href="#">愛庫樂團</a></li>
<li><a href="#">愛朵女孩</a></li>
<li><a href="#">安琪兒</a></li>
<li><a href="#">愛樂團</a></li>
<li><a href="#">哎吆樂隊</a></li>
<li><a href="#">城市少女</a></li>
</ul>
</div> </body>
</html> |
