利用JavaScript腳本，從瀏覽器中獲取各個關于位置的參數(shù)，然后將其計算后，定位在窗體的右下角。可以承認，這個方法確實是比較自然的想法，也是很常見的方法，但是這樣的方法有以下幾個缺點：
那有沒有比較“平靜”高效的表示方式呢？比如是否有一種用CSS的方式呢？
首先，我們將目光投向了CSS規(guī)范，我想很多人和我一樣很快就想到了position屬性，說到定位，我們很容易想到這個屬性。這個屬性一共有四個選項：static、relative、absolute、fixed（詳情請點擊）。很高興，我們在閱讀了相關的注釋后，我們大概能看到fixed是比較符合我們的需求的：
fixed:
位置被設置為 fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標。此元素的位置可通過 ”left”、”top”、”right” 以及”bottom” 屬性來規(guī)定。不論窗口滾動與否，元素都會留在那個位置。工作于 IE7（strict 模式）。
于是我們很快就有了以下的代碼，不過很遺憾，IE中并不能通過嚴格的測試，但是FireFox中卻可以通過測試！
<html>
<head>
<!–http://volnet.cnblogs.com–>
<title>Only fit FireFox! :(</title>
<!–Some thing about the fixed style!–>
<style type=”text/css”>
.fixed_div{
position:fixed;
left:200px;
bottom:20px;
width:400px;
}
</style>
</head>
<body>
<div class=”fixed_div” style=”border:1px solid #200888;”>content, I’m content</div>
<div style=”height:888px;”></div>
</body>
</html>
不管上面上面說的IE7的strict模式，很顯然，除了IE7，我們的挑戰(zhàn)還有包括IE6在內的一大堆未知的因素。很顯然，雖然這個方法通過了FireFox，但我們還是宣告失敗了。
難道我們只能使用JavaScript讓這一切繼續(xù)“卡”下去么？（我指的是用JavaScript的時候效果很卡）
當然不行，我們的癥結究竟在哪？我們該如何去解除它呢？帶著這樣的郁悶，我們需要開始新的探險。
HTML究竟是啥？
這個問題換在別的地方問，您可能要搬出一大堆的文檔來告訴我HTML的定義，但這里我并不需要那么完整的答案。我們知道HTML是由一大堆的<tag></tag>組成的，而這一大堆的<tag></tag>組合在一起，它們的結構就像一棵樹，是的，HTML的代碼就是被解釋為了一棵樹被瀏覽器所認識。它有一個根，那就是<html></html>節(jié)（root），在根節(jié)點下常見的節(jié)點中，我們通常能見到<head></head>和<body></body>兩個節(jié)點，它們之下又有……
現(xiàn)在回顧一下我們的問題，我們的問題是我們滾動滾動條的時候我們希望其中的一個指定的div不會跟著滾動條滾動。
那么下面讓我們來回答另一個問題，啥是滾動條？
滾動條，顧名思義，就是可以滾動的條（ScrollBar）（廢話
說到這里您估計都還很清楚，但既然我說滾動條也是一個元素，那么它是不是也在我們的HTML中呢？又或者它是瀏覽器的固有的一部分？
如果您覺得它是HTML中的一部分，那么您就對了，因為它是依附容器而存在的，而默認產生滾動條的容器是<body></body>或者<html></html>節(jié)，它并不是瀏覽器固有的一部分，瀏覽器只是默認完整展示了一整個html文檔，并不知道它中間的內容究竟是否需要滾動條的支持。
那么讓我們回顧上面的那幾行代碼吧，假設fixed對您當前（失敗）的瀏覽器無效的話，那么我們來看看它們的結構，外面是html標簽，向內是body標簽，再向內則是div標簽，div標簽很明顯是它們的一部分，這樣假設我們的div標簽所設置的定位屬性無論如何（四個可能的屬性皆沒起到什么作用）改變不了自身顯示狀況。我們能否更換一個思路呢？
剛才我說了，滾動條是容器所固有的，不管是外面那個滾動條，還是里面那個滾動條。那么我能否讓這個需要固定的div和那個body或者html容器脫離關系呢？
看到滾動條的控制可以通過CSS的overflow的幾個屬性來控制，想必大家都不陌生了。（陌生的朋友點擊相關鏈接即可進入查看）
那么我是否可以自己設置兩個完全隔離的div來模擬這種場景呢？（雖說是模擬，但是效果一模一樣噢～）
<html>
<head>
<title></title>
<style type=”text/css”>
html,body {
overflow:hidden;
margin:0px;
width:100%;
height:100%;
}
.virtual_body {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:auto;
}
.fixed_div {
position:absolute;
z-index:2008;
bottom:20px;
left:40px;
width:800px;
height:40px;
border:1px solid red;
background:#e5e5e5;
}
</style>
</head>
<body>
<div class=”fixed_div”>I am still here!</div>
<div class=”virtual_body”>
<div style=”height:888px;”>
I am content !
</div>
</div>
</body>
</html>
分析：
html,body：將默認可能會隨機出現(xiàn)的滾動條，完全地隱藏了，這樣不管您放了啥內容，它們都不會出來了。
.virtual_body：顧名思義，就是一個假的body了，它被設置為長寬都為100%的，意思就是它利用了所有可視的瀏覽器窗體顯示所有的內容，并垂直允許出現(xiàn)滾動條。
.fixed_div：這下它可以利用絕對值進行定位了，因為在這個場景下，這個頁面100%地被那個假冒的body給獨霸了，而滾動條反正也出不來，您就可以自認為是在某個點蹲坑了，絕對安全。
想必您通過這些代碼已經了解了新的方法不過是將一個div換作了之前的body。
通過這篇文章，希望您能解決這個問題，更深入一點，希望您能夠對HTML的具體內容有更深刻地理解
