欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

讓DIV塊在頁面的某個位置固定的css代碼

  發(fā)布時間:2011-01-06 00:21:39   作者:佚名   我要評論
首先,我們將目光投向了CSS規(guī)范,我想很多人和我一樣很快就想到了position屬性,說到定位,我們很容易想到這個屬性。
這個屬性一共有四個選項:static、relative、absolute、fixed。很高興,我們在閱讀了相關(guān)的注釋后,我們大概能看到fixed是比較符合我們的需求的:
fixed:
位置被設(shè)置為 fixed 的元素,可定位于相對于瀏覽器窗口的指定坐標。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規(guī)定。不論窗口滾動與否,元素都會留在那個位置。工作于 IE7(strict 模式)。
于是我們很快就有了以下的代碼,不過很遺憾,IE中并不能通過嚴格的測試,但是FireFox中卻可以通過測試!

復(fù)制代碼
代碼如下:

<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在內(nèi)的一大堆未知的因素。很顯然,雖然這個方法通過了FireFox,但我們還是宣告失敗了。
難道我們只能使用JavaScript讓這一切繼續(xù)“卡”下去么?(我指的是用JavaScript的時候效果很卡)
當(dāng)然不行,我們的癥結(jié)究竟在哪?我們該如何去解除它呢?帶著這樣的郁悶,我們需要開始新的探險。
HTML究竟是啥?
這個問題換在別的地方問,您可能要搬出一大堆的文檔來告訴我HTML的定義,但這里我并不需要那么完整的答案。我們知道HTML是由一大堆的<tag></tag>組成的,而這一大堆的<tag></tag>組合在一起,它們的結(jié)構(gòu)就像一棵樹,是的,HTML的代碼就是被解釋為了一棵樹被瀏覽器所認識。它有一個根,那就是<html></html>節(jié)(root),在根節(jié)點下常見的節(jié)點中,我們通常能見到<head></head>和<body></body>兩個節(jié)點,它們之下又有……
現(xiàn)在回顧一下我們的問題,我們的問題是我們滾動滾動條的時候我們希望其中的一個指定的div不會跟著滾動條滾動。
那么下面讓我們來回答另一個問題,啥是滾動條?
滾動條,顧名思義,就是可以滾動的條(ScrollBar)(廢話)。準確地說,滾動條通常是我們在頁面的內(nèi)容超過了瀏覽器顯示框的范圍的時候,為了能夠讓有限的空間展示無限的內(nèi)容所作出的一個妥協(xié)的元素,使用它可以讓我們查看當(dāng)前頁面內(nèi)容之外部分的內(nèi)容。
說到這里您估計都還很清楚,但既然我說滾動條也是一個元素,那么它是不是也在我們的HTML中呢?又或者它是瀏覽器的固有的一部分?
如果您覺得它是HTML中的一部分,那么您就對了,因為它是依附容器而存在的,而默認產(chǎn)生滾動條的容器是<body></body>或者<html></html>節(jié),它并不是瀏覽器固有的一部分,瀏覽器只是默認完整展示了一整個html文檔,并不知道它中間的內(nèi)容究竟是否需要滾動條的支持。
那么讓我們回顧上面的那幾行代碼吧,假設(shè)fixed對您當(dāng)前(失?。┑臑g覽器無效的話,那么我們來看看它們的結(jié)構(gòu),外面是html標簽,向內(nèi)是body標簽,再向內(nèi)則是div標簽,div標簽很明顯是它們的一部分,這樣假設(shè)我們的div標簽所設(shè)置的定位屬性無論如何(四個可能的屬性皆沒起到什么作用)改變不了自身顯示狀況。我們能否更換一個思路呢?
剛才我說了,滾動條是容器所固有的,不管是外面那個滾動條,還是里面那個滾動條。那么我能否讓這個需要固定的div和那個body或者html容器脫離關(guān)系呢?
看到滾動條的控制可以通過CSS的overflow的幾個屬性來控制,想必大家都不陌生了。(陌生的朋友點擊相關(guān)鏈接即可進入查看)
那么我是否可以自己設(shè)置兩個完全隔離的div來模擬這種場景呢?(雖說是模擬,但是效果一模一樣噢~)

復(fù)制代碼
代碼如下:

<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)的滾動條,完全地隱藏了,這樣不管您放了啥內(nèi)容,它們都不會出來了。
.virtual_body:顧名思義,就是一個假的body了,它被設(shè)置為長寬都為100%的,意思就是它利用了所有可視的瀏覽器窗體顯示所有的內(nèi)容,并垂直允許出現(xiàn)滾動條。
.fixed_div:這下它可以利用絕對值進行定位了,因為在這個場景下,這個頁面100%地被那個假冒的body給獨霸了,而滾動條反正也出不來,您就可以自認為是在某個點蹲坑了,絕對安全。
想必您通過這些代碼已經(jīng)了解了新的方法不過是將一個div換作了之前的body。

相關(guān)文章

最新評論