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