|
所有的框模型一開始都是按文檔中正常的元素流定位,，而定位position屬性允許我們改變這些自然的位置,。通過利用一些簡(jiǎn)單的Css規(guī)則，position使得設(shè)計(jì)者可以將HTML元素精確放置,，position屬性確定了每個(gè)元素框（box）定位的參考點(diǎn),。 在詳細(xì)介紹之前，我們先簡(jiǎn)要的說明一下定位的4種方法： 1,、靜止定位（static）：這種方法使得所有的元素最終位置都是一個(gè)靜止位置,。所以沒有什么需要特殊說的。 2,、絕對(duì)定位（absolute）：這種方法允許用戶指定元素的左上角,、右下角或者其他的參考點(diǎn)和最近的父元素之間的關(guān)系將該元素從正常的文檔流中拖出來。當(dāng)頁面滾動(dòng)時(shí),，元素將保持它們各自的位置不變,，隨著頁面一起滾動(dòng)，就像粘在一起一樣,。 3,、固定定位（fixed）：這種方法允許元素相對(duì)于實(shí)際的瀏覽器窗口放置。 4,、相對(duì)定位（relative）：這方法定義相對(duì)于在默認(rèn)情況下瀏覽器把它放置的位置。這個(gè)很難解釋,，可喜的是這個(gè)方法使用的很少,。 靜止定位static 定位的默認(rèn)值static，不使用定位屬性和使用這個(gè)值對(duì)頁面沒有什么效果的,。 絕對(duì)定位absolute 當(dāng)一個(gè)元素被絕對(duì)定位了,，瀏覽器做的第一件事是把它從流中完全移走，接著放置在定位屬性指定的位置上,?？纯聪旅娴睦樱?br> #sidebar{ position:absolute; top:100px; right:200px; width:280px; } 上 面說了被絕對(duì)定位的元素從流中間移走了，所以在流中間的任何元素將不會(huì)受到影響,，看見過網(wǎng)站上的小廣告吧,，后面的文字不會(huì)受其任何的影響，就是這樣的效 果,！還有這里介紹的定位是指元素,，對(duì)！是元素,，也就是說你可以使用在任何的元素上（包括內(nèi)聯(lián)元素哦）,，當(dāng)然更多的是使用在div上,。 那如果我放置兩個(gè)絕對(duì)定位的元素，誰會(huì)被遮擋住呢,？這里需要介紹一個(gè)叫做z-index的屬性,，將這個(gè)屬性設(shè)置的值越大，那個(gè)元素就會(huì)出現(xiàn)的上面,。我們來看看邊上的效果,。我們將前面的元素設(shè)置z-index:99; 在絕對(duì)定位元素內(nèi)嵌套的元素進(jìn)行絕對(duì)定位會(huì)怎么樣呢？這件事情是要說清楚的,，不要說我們沒有告訴你啊,，它使用的絕對(duì)定位是相對(duì)于它的父級(jí)位置的，而不是整個(gè)頁面的,。 注 意：個(gè)人認(rèn)為不要使用絕對(duì)定位的方式去布局你的網(wǎng)站,，因?yàn)榫W(wǎng)站的內(nèi)容往往會(huì)根據(jù)你數(shù)據(jù)庫內(nèi)容的多少來顯示，也就是說你不能完全確定網(wǎng)站的高度（還有一個(gè)原 因不是確定高度是因?yàn)閷捚恋碾娔X越來越多了）,。而絕對(duì)定位以后你將不能應(yīng)對(duì)這樣的變化,，比如你不能確定你的頁腳放置在什么位置上合適。 固定定位fixed 固定定位指定元素的位置和你使用絕對(duì)定位基本相同,，不過作用不同,。它的位置是相對(duì)于瀏覽器窗口的，下面的那個(gè)div就是的,，你滾動(dòng)一下鼠標(biāo)的滾輪看看就清楚了,。 #sidebar{ position:fixed; top:300px; left:-90px; width:280px; } 注意：position:fixed;這個(gè)屬性在IE6里面居然不兼容！現(xiàn)在使用IE6的可不少啊,，那總不能就這樣放任不管了吧,，我提供了一個(gè)簡(jiǎn)單事例，大家可以看看通過Css hack是如何解決這個(gè)問題的,。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>position:fixed in IE6 修正</title> <style type="text/css"> <!-- body{padding:0 10px;height:100%; font-size:12px;overflow-y:auto;} #leftMenu { background: #CCCCCC; height: 300px; width: 150px; position: fixed; left: 40px; top: 30px; border: 1px solid #666666; padding: 10px; letter-spacing: 0.2em; color:#990033;} #main{ background:#36F; margin-top:450px; margin-bottom:300px; float:right; padding:10px; color:#FFF;} * html{overflow-x:auto;overflow-y:hidden;} * html #leftMenu{position:absolute;} --> </style> </head> <body> <div id="leftMenu"> <p>這是左側(cè)的菜單,，在標(biāo)準(zhǔn)的瀏覽器中采用固定定位，而非標(biāo)準(zhǔn)的瀏覽器（IE6）中,，使用了一些HACK,，和IE6本身的BUG！</p> <p>enjoy it!（這句英語帥不,？）</p> </div> <div id="main"> <p>這個(gè)是一個(gè)測(cè)試,，IE6下position:fixed是不能使用的，但是我們使用一些技巧就能完美修復(fù)這個(gè)BUG,！</p> <p>拖動(dòng)頁面右邊滾動(dòng)條,，你可以看到，灰色的左菜單始終固定，這種現(xiàn)象不止于IE7,、FireFox,，在IE6下也有較為完美的表現(xiàn)~這 個(gè)是一個(gè)測(cè)試，IE6下position:fixed是不能使用的,，但是我們使用一些技巧就能完美修復(fù)這個(gè)BUG,！</p> </div> </body> </html> 相對(duì)定位relative 這 個(gè)方法使用的很少，可能大家都沒有用過,，或者別人使用了也看不出來,。先來看看它的工作原理，相對(duì)定位的元素仍然是頁面流的一部分,，不同于絕對(duì)定位和固定定 位,。但是它在顯現(xiàn)自身的最后一刻叛變了，它離開了自己的崗位,，偏移到Css指定的位置上,，原來的崗位呢？還給他留著呢,！ 誰逼迫它叛變的,？我們使用的position:relative;和瀏覽器就是元兇！大家可以試試看,，你指定的家伙是怎么叛變的,，我就不做這個(gè)惡人了。 |
|
|
