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

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

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

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

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

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

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

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

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

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

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

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

問題一：

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

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

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

問題二：

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

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

1. 滾動圖的左右按鈕（index_zuo,index_you）樣式是絕對定位,它的父級（rollBox）樣式是相對定位；

2.頭像層（pic）樣式是絕對定位，它的父級（box）樣式是相對定位；

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

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

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

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

廣告

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