純CSS定位的固定垂直居中浮動層代碼，附經(jīng)典解說《詳解定位與定位應(yīng)用》

發(fā)布時間：2009-07-01 01:21:50 作者：佚名

關(guān)于在html中浮動層是眾多網(wǎng)頁愛好者剛開始的難點，主要在于定位。如果你對CSS定位還不夠了解可以接著往下看，運行里面的內(nèi)容即可。【需求】：將一個網(wǎng)頁分成頭、身和腳三部分。如下： ———————————&

關(guān)于在html中浮動層是眾多網(wǎng)頁愛好者剛開始的難點，主要在于定位。如果你對CSS定位還不夠了解可以接著往下看，運行里面的內(nèi)容即可。
【需求】：
將一個網(wǎng)頁分成頭、身和腳三部分。如下：
————————————————————
頭
————————————————————
身
————————————————————
腳
————————————————————
要求：1、頭腳等高，并且頭位于瀏覽器頂部，腳位于瀏覽器底部，身高可變化；
2、在身的左右分別放置兩個垂直居中的div，類似浮動廣告條，位置固定，不隨滾動條的滾動和滾動；
【問題】：
1、如何固定層？

復(fù)制代碼

代碼如下:

/* 全局浮動層固定默認樣式設(shè)置，支持FF和IE */
.fixed {position:fixed;}
* html div.fixed {position:absolute; right:16px;} /* [only for ie] "right=16px"是為了顯示滾動條,即right最小值為16px */

以下摘抄一部分文字如下：

由于廣告的濫用，使得一些瀏覽器軟件都開始有了廣告內(nèi)容攔截，使得一些很好的效果現(xiàn)在都不推薦使用了。比如讓一個元素可能隨著網(wǎng)頁的滾動而不斷改變自己在瀏覽器的位置。而現(xiàn)在我可以通過CSS中的一個定位屬性來實現(xiàn)這樣的一個效果，這個元素屬性就是曾經(jīng)不被支持的position:fixed; 他的含義就是：固定定位。這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網(wǎng)頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。
雖然原來的瀏覽器并不支持過個屬性，但是瀏覽器的發(fā)展使得現(xiàn)在的高級瀏覽器都可以正確的解析這個CSS屬性。并且通過CSS HACK來讓IE6都可以實現(xiàn)這樣的效果（目前無法使IE5.x）實現(xiàn)這種效果。
2、如何垂直居中？

這個問題其實就是DIV絕對定位是居中問題。其實so easy！以下是我的思路：只要將該固定定位的div的top設(shè)為50%，然后將上移到該層的高度的一半就行了(margin-top為負)，例如，如果某div高度為200px，要使得該div垂直居中，只要設(shè)置"position:absolute;top:50%;margin-top:-100px"，就是這么簡單！

因此，水平居中也解決了，如果該層寬度為300px，那么"position:absolute;left:50%;margin-left:-100px"代碼可以解決水平居中問題。

即水平又垂直，那就將兩者結(jié)合起來嘍！嘿嘿。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=GBK" /><meta http-equiv="Content-Language" content="zh-CN" /><meta http-equiv="Author" content="笑的自然" /><meta http-equiv="Index" content="http://blog.csdn.net/xxd851116" /><title>純CSS定位的固定垂直居中浮動層代碼，附經(jīng)典解說：《詳解定位與定位應(yīng)用》</title><style type="text/css">  /*<![CDATA[*/ body {margin:0; padding:0; height:100%; overflow:auto;}/* 全局浮動層固定默認樣式設(shè)置，支持FF和IE */.fixed {position:fixed;}* html div.fixed {position:absolute; right:16px;} /* [only for ie] "right=16px"是為了顯示滾動條,即right最小值為16px */html {overflow:auto !important; overflow:hidden;}#menu1 {width:100%; padding:10px; text-align:center; font-weight:bold; background:#000; color:#FFF; top:0;}#menu2 {width:100%; padding:10px; text-align:center; font-weight:bold; background:#000; color:#FFF; bottom:0;}#menu3 {width:75px; height:150px; padding:10px; background:#333; line-height:20px; color:#FFF; margin-top:-75px; top:50%; left:0;}#menu4 {width:75px; height:150px; padding:10px; background:#333; line-height:20px; color:#FFF; margin-top:-75px; top:50%; right:16px;} /* 注意：right需要去掉滾動條寬度16px */#menu1 a, #menu2 a , #menu3 a , #menu4 a {color:#FFF;}</style></head><body><div id="menu1" class="fixed"> <a  title="Dummy menu item">Mozilla</a> <a  title="Dummy menu item">Opera</a> <a  title="Dummy menu item">Netscape</a> <a  title="Dummy menu item">Firefox</a> <a  title="Dummy menu item">IE6</a> <a  title="Dummy menu item">Windows</a> <a  title="Dummy menu item">Style</a> <a  title="Dummy menu item">CSS</a></div><div id="menu2" class="fixed"> <a  title="Dummy menu item">Mozilla</a> <a  title="Dummy menu item">Opera</a> <a  title="Dummy menu item">Netscape</a> <a  title="Dummy menu item">Firefox</a> <a  title="Dummy menu item">IE6</a> <a  title="Dummy menu item">Windows</a> <a  title="Dummy menu item">Style</a> <a  title="Dummy menu item">CSS</a></div><div id="menu3" class="fixed"> <a  target="_blank" title="Dummy menu item">^_^這是純CSS定位的固定垂直居中浮動層廣告條哦，<br/>滾動時一點也不閃爍吧？<br/>哈哈！</a></div><div id="menu4" class="fixed"> <a  target="_blank" title="Dummy menu item">^_^這是純CSS定位的固定垂直居中浮動層廣告條哦，<br/>滾動時一點也不閃爍吧？<br/>哈哈！</a></div><div style="height:2000px;background-color:#eee;padding:50px;line-height:20px;width:720px;margin-left:auto;margin-right:auto;"><h3>本頁面編輯:<a >http://blog.csdn.net/xxd851116</a></h3><h2 class="post-title">詳解定位與定位應(yīng)用</h2><p>定位一直是WEB標(biāo)準(zhǔn)應(yīng)用中的難點，如果理不清楚定位那么可能應(yīng)實現(xiàn)的效果實現(xiàn)不了，實現(xiàn)了的效果可能會走樣。如果理清了定位的原理，那定位會讓網(wǎng)頁實現(xiàn)的更加完美。</p><ul>    <li><strong>引伸閱讀</strong> </li>    <li><a >解讀absolute與relative</a> </li>    <li><a >position:relative/absolute無法沖破的等級</a> </li>    <li><a >對《無法沖破的等級》一文的補充</a> </li></ul><p><strong>定位的定義：</strong></p><p>在CSS中關(guān)于定位的內(nèi)容是：position:relative | absolute | static | fixed </p><p>static 沒有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過z-index進行層次分級。relative 不脫離文檔流，參考自身靜態(tài)位置通過 top,bottom,left,right 定位，并且可以通過z-index進行層次分級。absolute 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近的父級定位元素，當(dāng)父級 position 為 static 時，absolute元素將以body坐標(biāo)原點進行定位，可以通過z-index進行層次分級。fixed 固定定位，這里他所固定的對像是可視窗口而并非是body或是父級元素?？赏ㄟ^z-index進行層次分級。</p><p>CSS中定位的層疊分級：z-index: auto | namber;&nbsp; </p><p>auto 遵從其父對象的定位namber&nbsp; 無單位的整數(shù)值?？蔀樨摂?shù)</p><p><strong>定位的原理：</strong></p><p style="COLOR: blue">可以位移的元素 （相對定位）</p><p>在本文流中，任何一個元素都被文本流所限制了自身的位置，但是通過CSS我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，我們也可以通過margin來讓元素產(chǎn)生位置移動。但是事實上那并非是真實的位移，因為，那只是通過加大margin值來實現(xiàn)的障眼法。而真正意義上的位移是通過top,right,bottom,left（下稱TRBL，TRBL可以折分使用。）針對一個相對定位的元素所產(chǎn)生的。我們看下面的圖：</p><p><img alt="" width="520" src="http://www.andymao.com/andy/upload/200704010545288882.PNG" /></p><p>我們看圖中是一個寬度為200px，高度為50px，margin:25px; border:25px solid #333; padding:25px; 相對定位的元素，并且位移距上50px，距左50px。而下方是一塊默認定位的黑色區(qū)塊。我們看到這個處在文本流的區(qū)塊被上面的相對定位擋住了一部分，這說明：&ldquo;當(dāng)元素被設(shè)置相對定位或是絕對定位后，將自動產(chǎn)生層疊，他們的層疊級別自然的高于文本流&rdquo;。除非設(shè)置其z-index值為負值，但是在Firefox等瀏覽器中z-index為負值時將不會顯示。并且我們發(fā)現(xiàn)當(dāng)相對定位元素進行位移后，表現(xiàn)內(nèi)容已經(jīng)脫離了文本流，只是在本文流中還為原來的相對定位留下了原有的總寬與總高（內(nèi)容的高度或是寬度加上margin\border\padding的數(shù)值）。這說明在相對定位中，雖然表現(xiàn)區(qū)脫離了原來的文本流，但是在文本流中還還有此相對定位的老窩。這點要特別注意，因為在實際應(yīng)用中如果相對定位的位移數(shù)值過大，那么原有的區(qū)域就會形成一塊空白。</p><p>并且我們注意，定位元素的坐標(biāo)點是在margin值的左上邊緣點，即圖中的B點。那么所有的位移的計算將以這個點為基礎(chǔ)進行元素的推動。當(dāng)TRBL為正值時位移的方向是內(nèi)聚的，由些可推，當(dāng)TRBL為負值時位移的方向是外放的。在圖片有位移的箭頭指向標(biāo)識，帶有加號的是正值位移方向，帶有減號的是負值位移方向。關(guān)于位移方位，可以延伸閱讀<a target="new_windows" >懌飛</a>的《<a target="new_windows" >由淺入深漫談margin屬性（一）</a>》</p><p style="COLOR: blue">可以在任意一個位置的元素 （絕對定位）</p><p>如上所述：相對定位只可以在文本流中進行位置的上下左右的移動，同樣存在一定的局限性，雖然他的表現(xiàn)區(qū)脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個打工的人他到了外地，但是在老家依然有一個專屬于他的位置，這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來，如果希望文本流拋棄這個部分就需要用到絕對定位，絕對定位不光脫離了文本流，而且在文本流中也不會給這個絕對定位元素留下專屬空位，這就好比是一個工廠里的工人，如果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過TRBL來設(shè)置元素處在任何一個位置。在父層position屬性為默認值時，TRBL的坐標(biāo)原點以body的坐標(biāo)原點為起始?？聪聢D：</p><img alt="" width="520" src="http://www.andymao.com/andy/upload/200704010614004430.png" /><p>上圖可知，文本流中的內(nèi)容會頂替絕對定位無素的位置，一點都不會客氣。而絕對定位元素自然的層疊于文本流之上。而在單一的絕對定位中，定位元素將會跑到網(wǎng)頁的左上角，因為那里是他們的被絕對定位后的坐標(biāo)原點。</p><p style="COLOR: blue">被關(guān)聯(lián)的絕對定位</p><p>上面說的是單一的絕對定位，而在實際的應(yīng)用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性，但是又希望絕對定位的坐標(biāo)原點可以固定在網(wǎng)頁中的某一個點，當(dāng)這個點被移動時絕對位定元素希望能保證相對于這個原坐標(biāo)的相對位置。也就是說需要這個絕對定位要跟著網(wǎng)頁移動，而并且是因定在網(wǎng)頁的某一個固定位置。通常當(dāng)網(wǎng)頁是居中形式的時候這種效果就會顯得特別的重要。要實現(xiàn)這種效果基本方式就是為這個絕對定位的父級設(shè)置為相對定位。那么絕對定位的坐標(biāo)就會以父級為坐標(biāo)起始點。</p><p>雖然是如此，但是這個坐標(biāo)原點卻并不是父級的坐標(biāo)原點，這是一個很奇怪的坐標(biāo)位置。我們看一下模型圖示：</p><img alt="" width="520" src="http://www.andymao.com/andy/upload/200704010637260135.png" /><p>我們看到，這個圖中父級為黑灰色區(qū)塊，子級為青色區(qū)塊。父級是相對定位，子級是絕對定位。子級設(shè)置了頂部位移50個像素，左傾位移50個像素。那么我們看，子級的坐標(biāo)原點并不是從父級的坐標(biāo)原點位移50個像素，而是從父級塊的padding左上邊緣點為坐標(biāo)起始點（即A點）。而父級這里如果要產(chǎn)生位置移動，或是瀏覽器窗口大小有所變動都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關(guān)系。這個子級也不用調(diào)整數(shù)值。</p><p>這是一種很特別并且也是非常實用的應(yīng)用方式。如果你之前對于定位的控制并不自如的話，相信看完對這里對定位的解釋一定可以把定位使用得隨心所欲。</p><p style="COLOR: blue">總在視線里的元素 （固定定位）</p><p>由于廣告的濫用，使得一些瀏覽器軟件都開始有了廣告內(nèi)容攔截，使得一些很好的效果現(xiàn)在都不推薦使用了。比如讓一個元素可能隨著網(wǎng)頁的滾動而不斷改變自己在瀏覽器的位置。而現(xiàn)在我可以通過CSS中的一個定位屬性來實現(xiàn)這樣的一個效果，這個元素屬性就是曾經(jīng)不被支持的position:fixed; 他的含義就是：固定定位。這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網(wǎng)頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。</p><p>雖然原來的瀏覽器并不支持過個屬性，但是瀏覽器的發(fā)展使得現(xiàn)在的高級瀏覽器都可以正確的解析這個CSS屬性。并且通過CSS HACK來讓IE6都可以實現(xiàn)這樣的效果（目前無法使IE5.x）實現(xiàn)這種效果。為了不使本文變成冗長的大論這里只給出這個實例算是這篇文章的結(jié)束。關(guān)于這個實例的一些問題大家可以自行分析。有不理解的地方可以給我留言！</p></div></body></html>

提示：您可以先修改部分代碼再運行

內(nèi)容來源：http://blog.csdn.net/xxd851116/archive/2009/06/29/4308161.aspx

Tag：浮動層固定垂直居中定位 css

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

純CSS定位的固定垂直居中浮動層代碼，附經(jīng)典解說《詳解定位與定位應(yīng)用》

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容

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

純CSS定位的固定垂直居中浮動層代碼，附經(jīng)典解說 《詳解定位與定位應(yīng)用》

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容

純CSS定位的固定垂直居中浮動層代碼，附經(jīng)典解說《詳解定位與定位應(yīng)用》