詳細(xì)講解CSS定位的應(yīng)用及注意事項(xiàng)

在講解CSS定位前，首先要搞清楚以下幾個(gè)屬性的真正含義和區(qū)別，如下：

【? position:relative | absolute | static | fixed? 】

A：相對(duì)定位（position: relative）：如果對(duì)某一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過(guò)設(shè)置垂直（或水平)位置（top,right,bottom,left四值），讓這個(gè)元素"相對(duì)于"它的起點(diǎn)進(jìn)行移動(dòng)。注：設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留；

B：絕對(duì)定位(position: absolute)：絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，所以不會(huì)占用空間。與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。注：設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除，并相對(duì)于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框；

C：固定定位(position: fixed)：固定定位元素的位置總以視窗左上角定位；注：IE6不兼容此屬性；

D：static ：沒(méi)有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過(guò)z-index進(jìn)行層次分級(jí)；

【定位原理：在文本流中，所有元素的位置都受文本流的限制，但我們可以通過(guò)CSS樣式去改變這些元素的位置(如：margin，float)；其實(shí)真正意義上的位移是通過(guò)top，right，bottom，left來(lái)實(shí)現(xiàn)的】

A：position: relative： 被相對(duì)定位元素不會(huì)脫離文檔流，它會(huì)參考自身靜態(tài)位置的左上角，通過(guò) top，right，bottom，left進(jìn)行位置移動(dòng)。注：相對(duì)定位層原有位置還會(huì)繼續(xù)占用文檔流；如下圖：

紅色區(qū)域被相對(duì)定位后，相對(duì)A點(diǎn)通過(guò)top:20px，left:15px進(jìn)行位移，但相對(duì)定位層的原有位置還會(huì)繼續(xù)保留；

B：position:absolute：被絕對(duì)定位元素會(huì)脫離文檔流，且會(huì)選取自己最近的父級(jí)定位元素，通過(guò) top，right，bottom，left進(jìn)行位置移動(dòng)。注：當(dāng)父級(jí)position屬性是static時(shí)，absolute位移定位置將以body的原點(diǎn)坐標(biāo)進(jìn)行計(jì)算；如下圖：紅色區(qū)域被絕對(duì)定位后，被定位層脫離文檔流；如果A點(diǎn)層是 relative（或 absolute時(shí)，即紅色區(qū)域的父級(jí)），被定位層會(huì)以A點(diǎn)坐標(biāo)通過(guò)top:20px，left:15px進(jìn)行位移；當(dāng)父級(jí)沒(méi)有定位時(shí)，文檔以body的原點(diǎn)坐標(biāo)通過(guò)top:20px，left:15px進(jìn)行位移;

【定位的實(shí)際應(yīng)用】

問(wèn)題一：

IE6本身不支持position: fixed屬性，但可以通過(guò)hack的方法解決此問(wèn)題，如下：

position: fixed;top: 0;left:0; /* 除ie6之外的瀏覽器執(zhí)行此樣式 */

_position:absolute:_top:expression(documentElement.scrollTop + 0 + "px"); /* 僅ie6執(zhí)行此樣式? */

問(wèn)題二：

當(dāng)絕對(duì)定位和相對(duì)定位配合使用時(shí)，在IE6下會(huì)產(chǎn)生一個(gè)奇偶BUG;當(dāng)相對(duì)定位層的寬度值是奇數(shù)時(shí)，絕對(duì)定位層的位置是上右（或下右）時(shí)，在IE6下右側(cè)會(huì)出現(xiàn)1像素的間隙；反之當(dāng)相對(duì)定位層的高度是奇數(shù)時(shí)，絕對(duì)定位層的位置是左下（或右下）時(shí)，在IE6的下方會(huì)出現(xiàn)1像素的間隙；所以當(dāng)采用定位時(shí)，相對(duì)定位層盡量避免使用奇數(shù)數(shù)值；如果必須使用奇數(shù)值，可以通過(guò)HACK方法給IE6單獨(dú)書(shū)寫(xiě)數(shù)值（如left:0px；_left:-1px;）；

上面所說(shuō)定位原理都是單獨(dú)的使用方法，而在實(shí)際應(yīng)用中我們總會(huì)使用一些特別的形式；即希望元素具有絕對(duì)定位特性的同時(shí)，又希望絕對(duì)定位的坐標(biāo)原點(diǎn)可隨意固定在網(wǎng)頁(yè)的某一點(diǎn)上，當(dāng)這個(gè)相對(duì)點(diǎn)隨意移動(dòng)時(shí)，絕對(duì)定位層可以隨之改變位置，也就是絕對(duì)定位層可以隨著網(wǎng)頁(yè)移動(dòng)；如果想實(shí)現(xiàn)這種定位方式，必須在這個(gè)絕對(duì)定位層的父級(jí)設(shè)置相對(duì)定位值，那么絕對(duì)定位層就會(huì)以父級(jí)的坐標(biāo)原點(diǎn)為坐標(biāo)起始原點(diǎn)；此方法在網(wǎng)頁(yè)制作中使用的比較廣泛，如下：

1. 滾動(dòng)圖的左右按鈕（index_zuo,index_you）樣式是絕對(duì)定位,它的父級(jí)（rollBox）樣式是相對(duì)定位；

2.頭像層（pic）樣式是絕對(duì)定位，它的父級(jí)（box）樣式是相對(duì)定位；

諸如此類的實(shí)際應(yīng)用還有很多，如下拉菜單，焦點(diǎn)圖，輪播圖和一些不規(guī)則的復(fù)雜結(jié)構(gòu)都會(huì)用到此類定位方式；

由于市場(chǎng)的各類瀏覽器類型較多，對(duì)CSS定位的支持也略有不同，其中IE6的問(wèn)題相對(duì)較多，需要根據(jù)不同情況進(jìn)行不同的調(diào)試；

分享名稱：詳細(xì)講解CSS定位的應(yīng)用及注意事項(xiàng)
網(wǎng)頁(yè)URL：http://www.bm7419.com/news2/318252.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站導(dǎo)航、自適應(yīng)網(wǎng)站、定制開(kāi)發(fā)、做網(wǎng)站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)