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

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

  發(fā)布時間：2011-01-06 00:21:39   作者：佚名   我要評論
首先，我們將目光投向了CSS規(guī)范，我想很多人和我一樣很快就想到了position屬性，說到定位，我們很容易想到這個屬性。
這個屬性一共有四個選項：static、relative、absolute、fixed。很高興，我們在閱讀了相關(guān)的注釋后，我們大概能看到fixed是比較符合我們的需求的：
fixed:
位置被設(shè)置為 fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標(biāo)。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規(guī)定。不論窗口滾動與否，元素都會留在那個位置。工作于 IE7（strict 模式）。
于是我們很快就有了以下的代碼，不過很遺憾，IE中并不能通過嚴(yán)格的測試，但是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的代碼就是被解釋為了一棵樹被瀏覽器所認(rèn)識。它有一個根，那就是<html></html>節(jié)（root），在根節(jié)點下常見的節(jié)點中，我們通常能見到<head></head>和<body></body>兩個節(jié)點，它們之下又有……
現(xiàn)在回顧一下我們的問題，我們的問題是我們滾動滾動條的時候我們希望其中的一個指定的div不會跟著滾動條滾動。
那么下面讓我們來回答另一個問題，啥是滾動條？
滾動條，顧名思義，就是可以滾動的條（ScrollBar）（廢話）。準(zhǔn)確地說，滾動條通常是我們在頁面的內(nèi)容超過了瀏覽器顯示框的范圍的時候，為了能夠讓有限的空間展示無限的內(nèi)容所作出的一個妥協(xié)的元素，使用它可以讓我們查看當(dāng)前頁面內(nèi)容之外部分的內(nèi)容。
說到這里您估計都還很清楚，但既然我說滾動條也是一個元素，那么它是不是也在我們的HTML中呢？又或者它是瀏覽器的固有的一部分？
如果您覺得它是HTML中的一部分，那么您就對了，因為它是依附容器而存在的，而默認(rèn)產(chǎn)生滾動條的容器是<body></body>或者<html></html>節(jié)，它并不是瀏覽器固有的一部分，瀏覽器只是默認(rèn)完整展示了一整個html文檔，并不知道它中間的內(nèi)容究竟是否需要滾動條的支持。
那么讓我們回顧上面的那幾行代碼吧，假設(shè)fixed對您當(dāng)前（失敗）的瀏覽器無效的話，那么我們來看看它們的結(jié)構(gòu)，外面是html標(biāo)簽，向內(nèi)是body標(biāo)簽，再向內(nèi)則是div標(biāo)簽，div標(biāo)簽很明顯是它們的一部分，這樣假設(shè)我們的div標(biāo)簽所設(shè)置的定位屬性無論如何（四個可能的屬性皆沒起到什么作用）改變不了自身顯示狀況。我們能否更換一個思路呢？
剛才我說了，滾動條是容器所固有的，不管是外面那個滾動條，還是里面那個滾動條。那么我能否讓這個需要固定的div和那個body或者h(yuǎn)tml容器脫離關(guān)系呢？
看到滾動條的控制可以通過CSS的overflow的幾個屬性來控制，想必大家都不陌生了。（陌生的朋友點擊相關(guān)鏈接即可進(jì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：將默認(rèn)可能會隨機(jī)出現(xiàn)的滾動條，完全地隱藏了，這樣不管您放了啥內(nèi)容，它們都不會出來了。
.virtual_body：顧名思義，就是一個假的body了，它被設(shè)置為長寬都為100%的，意思就是它利用了所有可視的瀏覽器窗體顯示所有的內(nèi)容，并垂直允許出現(xiàn)滾動條。
.fixed_div：這下它可以利用絕對值進(jìn)行定位了，因為在這個場景下，這個頁面100%地被那個假冒的body給獨(dú)霸了，而滾動條反正也出不來，您就可以自認(rèn)為是在某個點蹲坑了，絕對安全。
想必您通過這些代碼已經(jīng)了解了新的方法不過是將一個div換作了之前的body。

相關(guān)文章

最新評論