用css固定div內容在頁面的某個位置
首先，我們將目光投向了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的時候效果很卡）
動滾動條的時候我們希望其中的一個指定的div不會跟著滾動條滾動。
滾動條，顧名思義，就是可以滾動的條（ScrollBar）（廢話）。準確地說，滾動條通常是我們在頁面的內容超過了瀏覽器顯示框的范圍的時候，為了能夠讓有限的空間展示無限的內容所作出的一個妥協(xié)的元素，使用它可以讓我們查看當前頁面內容之外部分的內容。
說到這里您估計都還很清楚，但既然我說滾動條也是一個元素，那么它是不是也在我們的HTML中呢？又或者它是瀏覽器的固有的一部分？
如果您覺得它是HTML中的一部分，那么您就對了，因為它是依附容器而存在的，而默認產生滾動條的容器是<body></body>或者<html></html>節(jié)，它并不是瀏覽器固有的一部分，瀏覽器只是默認完整展示了一整個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。
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網友會為你解答！！ 點擊進入論壇
