讓DIV塊在頁面的某個(gè)位置固定的css代碼
發(fā)布時(shí)間：2011-01-06 00:21:39 作者：佚名 
我要評(píng)論
我要評(píng)論首先，我們將目光投向了CSS規(guī)范，我想很多人和我一樣很快就想到了position屬性，說到定位，我們很容易想到這個(gè)屬性。
這個(gè)屬性一共有四個(gè)選項(xiàng)：static、relative、absolute、fixed。很高興，我們?cè)陂喿x了相關(guān)的注釋后，我們大概能看到fixed是比較符合我們的需求的：
fixed:
位置被設(shè)置為 fixed 的元素，可定位于相對(duì)于瀏覽器窗口的指定坐標(biāo)。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規(guī)定。不論窗口滾動(dòng)與否，元素都會(huì)留在那個(gè)位置。工作于 IE7（strict 模式）。
于是我們很快就有了以下的代碼，不過很遺憾，IE中并不能通過嚴(yán)格的測(cè)試，但是FireFox中卻可以通過測(cè)試！
<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)的一大堆未知的因素。很顯然，雖然這個(gè)方法通過了FireFox，但我們還是宣告失敗了。
難道我們只能使用JavaScript讓這一切繼續(xù)“卡”下去么？（我指的是用JavaScript的時(shí)候效果很卡）
當(dāng)然不行，我們的癥結(jié)究竟在哪？我們?cè)撊绾稳ソ獬兀繋е@樣的郁悶，我們需要開始新的探險(xiǎn)。
HTML究竟是啥？
這個(gè)問題換在別的地方問，您可能要搬出一大堆的文檔來告訴我HTML的定義，但這里我并不需要那么完整的答案。我們知道HTML是由一大堆的<tag></tag>組成的，而這一大堆的<tag></tag>組合在一起，它們的結(jié)構(gòu)就像一棵樹，是的，HTML的代碼就是被解釋為了一棵樹被瀏覽器所認(rèn)識(shí)。它有一個(gè)根，那就是<html></html>節(jié)（root），在根節(jié)點(diǎn)下常見的節(jié)點(diǎn)中，我們通常能見到<head></head>和<body></body>兩個(gè)節(jié)點(diǎn)，它們之下又有……
現(xiàn)在回顧一下我們的問題，我們的問題是我們滾動(dòng)滾動(dòng)條的時(shí)候我們希望其中的一個(gè)指定的div不會(huì)跟著滾動(dòng)條滾動(dòng)。
那么下面讓我們來回答另一個(gè)問題，啥是滾動(dòng)條？
滾動(dòng)條，顧名思義，就是可以滾動(dòng)的條（ScrollBar）（廢話）。準(zhǔn)確地說，滾動(dòng)條通常是我們?cè)陧撁娴膬?nèi)容超過了瀏覽器顯示框的范圍的時(shí)候，為了能夠讓有限的空間展示無限的內(nèi)容所作出的一個(gè)妥協(xié)的元素，使用它可以讓我們查看當(dāng)前頁面內(nèi)容之外部分的內(nèi)容。
說到這里您估計(jì)都還很清楚，但既然我說滾動(dòng)條也是一個(gè)元素，那么它是不是也在我們的HTML中呢？又或者它是瀏覽器的固有的一部分？
如果您覺得它是HTML中的一部分，那么您就對(duì)了，因?yàn)樗且栏饺萜鞫嬖诘?，而默認(rèn)產(chǎn)生滾動(dòng)條的容器是<body></body>或者<html></html>節(jié)，它并不是瀏覽器固有的一部分，瀏覽器只是默認(rèn)完整展示了一整個(gè)html文檔，并不知道它中間的內(nèi)容究竟是否需要滾動(dòng)條的支持。
那么讓我們回顧上面的那幾行代碼吧，假設(shè)fixed對(duì)您當(dāng)前（失?。┑臑g覽器無效的話，那么我們來看看它們的結(jié)構(gòu)，外面是html標(biāo)簽，向內(nèi)是body標(biāo)簽，再向內(nèi)則是div標(biāo)簽，div標(biāo)簽很明顯是它們的一部分，這樣假設(shè)我們的div標(biāo)簽所設(shè)置的定位屬性無論如何（四個(gè)可能的屬性皆沒起到什么作用）改變不了自身顯示狀況。我們能否更換一個(gè)思路呢？
剛才我說了，滾動(dòng)條是容器所固有的，不管是外面那個(gè)滾動(dòng)條，還是里面那個(gè)滾動(dòng)條。那么我能否讓這個(gè)需要固定的div和那個(gè)body或者h(yuǎn)tml容器脫離關(guān)系呢？
看到滾動(dòng)條的控制可以通過CSS的overflow的幾個(gè)屬性來控制，想必大家都不陌生了。（陌生的朋友點(diǎn)擊相關(guān)鏈接即可進(jìn)入查看）
那么我是否可以自己設(shè)置兩個(gè)完全隔離的div來模擬這種場(chǎng)景呢？（雖說是模擬，但是效果一模一樣噢～）
<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)可能會(huì)隨機(jī)出現(xiàn)的滾動(dòng)條，完全地隱藏了，這樣不管您放了啥內(nèi)容，它們都不會(huì)出來了。
.virtual_body：顧名思義，就是一個(gè)假的body了，它被設(shè)置為長(zhǎng)寬都為100%的，意思就是它利用了所有可視的瀏覽器窗體顯示所有的內(nèi)容，并垂直允許出現(xiàn)滾動(dòng)條。
.fixed_div：這下它可以利用絕對(duì)值進(jìn)行定位了，因?yàn)樵谶@個(gè)場(chǎng)景下，這個(gè)頁面100%地被那個(gè)假冒的body給獨(dú)霸了，而滾動(dòng)條反正也出不來，您就可以自認(rèn)為是在某個(gè)點(diǎn)蹲坑了，絕對(duì)安全。
想必您通過這些代碼已經(jīng)了解了新的方法不過是將一個(gè)div換作了之前的body。
fixed:
位置被設(shè)置為 fixed 的元素，可定位于相對(duì)于瀏覽器窗口的指定坐標(biāo)。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規(guī)定。不論窗口滾動(dòng)與否，元素都會(huì)留在那個(gè)位置。工作于 IE7（strict 模式）。
于是我們很快就有了以下的代碼，不過很遺憾，IE中并不能通過嚴(yán)格的測(cè)試，但是FireFox中卻可以通過測(cè)試！
復(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)的一大堆未知的因素。很顯然，雖然這個(gè)方法通過了FireFox，但我們還是宣告失敗了。
難道我們只能使用JavaScript讓這一切繼續(xù)“卡”下去么？（我指的是用JavaScript的時(shí)候效果很卡）
當(dāng)然不行，我們的癥結(jié)究竟在哪？我們?cè)撊绾稳ソ獬兀繋е@樣的郁悶，我們需要開始新的探險(xiǎn)。
HTML究竟是啥？
這個(gè)問題換在別的地方問，您可能要搬出一大堆的文檔來告訴我HTML的定義，但這里我并不需要那么完整的答案。我們知道HTML是由一大堆的<tag></tag>組成的，而這一大堆的<tag></tag>組合在一起，它們的結(jié)構(gòu)就像一棵樹，是的，HTML的代碼就是被解釋為了一棵樹被瀏覽器所認(rèn)識(shí)。它有一個(gè)根，那就是<html></html>節(jié)（root），在根節(jié)點(diǎn)下常見的節(jié)點(diǎn)中，我們通常能見到<head></head>和<body></body>兩個(gè)節(jié)點(diǎn)，它們之下又有……
現(xiàn)在回顧一下我們的問題，我們的問題是我們滾動(dòng)滾動(dòng)條的時(shí)候我們希望其中的一個(gè)指定的div不會(huì)跟著滾動(dòng)條滾動(dòng)。
那么下面讓我們來回答另一個(gè)問題，啥是滾動(dòng)條？
滾動(dòng)條，顧名思義，就是可以滾動(dòng)的條（ScrollBar）（廢話）。準(zhǔn)確地說，滾動(dòng)條通常是我們?cè)陧撁娴膬?nèi)容超過了瀏覽器顯示框的范圍的時(shí)候，為了能夠讓有限的空間展示無限的內(nèi)容所作出的一個(gè)妥協(xié)的元素，使用它可以讓我們查看當(dāng)前頁面內(nèi)容之外部分的內(nèi)容。
說到這里您估計(jì)都還很清楚，但既然我說滾動(dòng)條也是一個(gè)元素，那么它是不是也在我們的HTML中呢？又或者它是瀏覽器的固有的一部分？
如果您覺得它是HTML中的一部分，那么您就對(duì)了，因?yàn)樗且栏饺萜鞫嬖诘?，而默認(rèn)產(chǎn)生滾動(dòng)條的容器是<body></body>或者<html></html>節(jié)，它并不是瀏覽器固有的一部分，瀏覽器只是默認(rèn)完整展示了一整個(gè)html文檔，并不知道它中間的內(nèi)容究竟是否需要滾動(dòng)條的支持。
那么讓我們回顧上面的那幾行代碼吧，假設(shè)fixed對(duì)您當(dāng)前（失?。┑臑g覽器無效的話，那么我們來看看它們的結(jié)構(gòu)，外面是html標(biāo)簽，向內(nèi)是body標(biāo)簽，再向內(nèi)則是div標(biāo)簽，div標(biāo)簽很明顯是它們的一部分，這樣假設(shè)我們的div標(biāo)簽所設(shè)置的定位屬性無論如何（四個(gè)可能的屬性皆沒起到什么作用）改變不了自身顯示狀況。我們能否更換一個(gè)思路呢？
剛才我說了，滾動(dòng)條是容器所固有的，不管是外面那個(gè)滾動(dòng)條，還是里面那個(gè)滾動(dòng)條。那么我能否讓這個(gè)需要固定的div和那個(gè)body或者h(yuǎn)tml容器脫離關(guān)系呢？
看到滾動(dòng)條的控制可以通過CSS的overflow的幾個(gè)屬性來控制，想必大家都不陌生了。（陌生的朋友點(diǎn)擊相關(guān)鏈接即可進(jìn)入查看）
那么我是否可以自己設(shè)置兩個(gè)完全隔離的div來模擬這種場(chǎng)景呢？（雖說是模擬，但是效果一模一樣噢～）
復(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)可能會(huì)隨機(jī)出現(xiàn)的滾動(dòng)條，完全地隱藏了，這樣不管您放了啥內(nèi)容，它們都不會(huì)出來了。
.virtual_body：顧名思義，就是一個(gè)假的body了，它被設(shè)置為長(zhǎng)寬都為100%的，意思就是它利用了所有可視的瀏覽器窗體顯示所有的內(nèi)容，并垂直允許出現(xiàn)滾動(dòng)條。
.fixed_div：這下它可以利用絕對(duì)值進(jìn)行定位了，因?yàn)樵谶@個(gè)場(chǎng)景下，這個(gè)頁面100%地被那個(gè)假冒的body給獨(dú)霸了，而滾動(dòng)條反正也出不來，您就可以自認(rèn)為是在某個(gè)點(diǎn)蹲坑了，絕對(duì)安全。
想必您通過這些代碼已經(jīng)了解了新的方法不過是將一個(gè)div換作了之前的body。
相關(guān)文章
使用CSS3的ruby-position固定注音位置的用法示例
ruby-position能在樣式上定制文字周圍的注音位置,頁面編碼設(shè)置好以后可以用來制作各種語言之間的加注翻譯效果,下面我們來看一下使用CSS3的ruby-position固定注音位置的用法2016-07-05html css 控制div或者table等固定在指定位置的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猦tml css 控制div或者table等固定在指定位置的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-06-13- 固定背景圖片的通常方法就是把background-attachment設(shè)成fix,進(jìn)一步的話自然則是用background-position,下面來詳解使用CSS固定頁面背景圖片及位置的方法:2016-05-17
基于jQuery+CSS的固定位置的網(wǎng)頁側(cè)邊欄
側(cè)欄固定式網(wǎng)頁框架，很好的運(yùn)用了 CSS+ jQuery的特性，左側(cè)欄，是不會(huì)隨著滾動(dòng)條而滾動(dòng)的，當(dāng)你拖動(dòng)滾動(dòng)條的時(shí)候，右側(cè)主體區(qū)的內(nèi)容跟著拖動(dòng)2011-01-19
css把容器級(jí)別（div...）標(biāo)簽固定在一個(gè)位置（在頁面最右邊）
這篇文章主要介紹了css把容器級(jí)別（div...）標(biāo)簽固定在一個(gè)位置（在頁面最右邊）的相關(guān)資料,需要的朋友可以參考下2018-07-26
