- 相關(guān)推薦
詳解CSS的相對定位和絕對定位
通常情況下，我們元素的position屬性的值默認(rèn)為static 就是沒有定位，元素出現(xiàn)在正常的文檔流中，，這個時候你給這個元素設(shè)置的left,right,bottom,top這些偏移屬性都是沒有效果的，不會生效，比如你設(shè)置一個距離左邊距偏移100px的聲明：left:100px 那么這條聲明不會起到任何效果。還有z-index屬性在這時也不會生效。
也就是說我們平時如果不給某元素一個position屬性的聲明，那么它默認(rèn)的就是我上述的這種情況，不過因為有了浮動，所以通常情況下我們還真不需要給元素設(shè)置position屬性!
但是某些特殊的情況下，我們不得不用到position屬性，那我們今天就講講position屬性的relative和absolute值
首先說relative ,相對定位。
怎么理解呢?如果說我對某元素設(shè)置了相對定位，那么首先這個元素他會跟其它的元素一樣，出現(xiàn)在文檔流中它該出現(xiàn)的位置，然后，我們可以設(shè)置它的水平或垂直偏移量，讓這個元素相對于它在文檔流中的位置的起始點(diǎn)進(jìn)行移動。有一點(diǎn)要注意， 在使用相對定位時，就算元素被偏移了，但是他仍然占據(jù)著它沒偏移前的空間。這里值得注意的一點(diǎn)是：偏移可不是邊距，跟邊距是不一樣的。
我們先看看下圖：
上圖中有三個浮動的塊，第二個塊是設(shè)置了相對定位position:relative了的，這時大家看到它的位置并沒有其它什么不同，跟其它兩個塊一樣都處在正常的文檔流中。
接下來我給那個設(shè)置了position:relative的塊設(shè)置一個偏移：left:50px ; top:30px 這時我們再看看效果：
這時我們發(fā)現(xiàn)第二個塊針對它本身位置的起始點(diǎn)進(jìn)行了一個偏移，但是它原來所占據(jù)的那個位置空間依然還在(虛線框標(biāo)示的地方)，即使我們把偏移量設(shè)置得再大一點(diǎn)，使它完全離開原來的位置，它原來位于文檔流中的位置仍然會存在，不會被第三個塊浮動過來填補(bǔ)掉。
同時，它的偏移也不會把別的塊從文檔流中原來的位置擠開，如果有重疊的地方它會重疊在其它文檔流元素之上，而不是把它們擠開，就像圖中那樣，它已經(jīng)覆蓋在了第三個塊之上。
我們可以設(shè)置它的z-index屬性來調(diào)整它的堆疊順序。
接下來我們來看看絕對定位：position:absolute
被設(shè)置了絕對定位的元素，在文檔流中是不占據(jù)空間的，如果某元素設(shè)置了絕對定位，那么它在文檔流中的位置會被刪除，那這個元素到哪去了呢?它浮了起來，其實設(shè)置了相對定位relative時也會讓該 元素浮起來，但它們的不同點(diǎn)在于，相對對定位不會刪除它本身在文檔流中占據(jù)的那塊空間，而絕對定位則會刪除掉該元素在文檔流中的位置，完全從文檔流中抽了出來，我們可以通過z-index來設(shè)置它們的堆疊順序 。
那么絕對定位是如何定位的呢?首先，如果它的父元素設(shè)置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就會相對于它的父元素來定位，位置通過left , top ,right ,bottom屬性來規(guī)定，如果它的父元素沒有設(shè)置定位，那么就得看它父元素的父元素是否有設(shè)置定位 ，如果還是沒有就繼續(xù)向更高層的祖先元素類推，總之它的定位就是相對于設(shè)置了除static定位之外的定位(比如position:relative)的第一個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那么它就會相對于文檔body來定位(并非窗口,相對于窗口定位的是fixed)
絕對定位的元素相對于誰來定位，我們就把這個"誰"叫著參照物，我們結(jié)合上面的講解來看看下圖就明白了 ：
我們看一下在瀏覽器里的效果，我們先看看沒有使用絕對定位時的樣子：
然后我們給第二個塊設(shè)置絕對定位：position:absolute 然后再設(shè)置一個偏移：left:150px;top:40px; 這時就變成了下圖所示：
還有一點(diǎn)就是：在設(shè)置偏移量的時候，我們可以設(shè)置負(fù)值。
【詳解CSS的相對定位和絕對定位】相關(guān)文章：
CSS元素定位的使用方法07-20
CSS3水波漣漪動畫定位樣式制作教程07-01
CSS3水波漣漪動畫定位樣式如何制作06-06
OA如何定位？08-01
駕駛員考試詳解科二考試坡道定位技巧09-19
CSS中position屬性的使用詳解07-25
如何定位自主招生院校08-30
《確定位置》教學(xué)設(shè)計10-01
如何定位自招院校10-06