詳解CSS的相對定位和絕對定位

2022-09-07 21:00:17 字數 1858 閱讀 5363

css的相對定位和絕對定位

通常情況下,我們元素的position屬性的值預設為static

就是沒有定位,元素出現在正常的文件流中,,這個時候你給這個元素設定的left,right,bottom,top這些偏移屬性都是沒有效果的,不會生效,比如你設定乙個距離左邊距偏移100px的宣告:left:100px

那麼這條宣告不會起到任何效果。還有z-index屬性在這時也不會生效。

也就是說我們平時如果不給某元素乙個position屬性的宣告,那麼它預設的就是我上述的這種情況,不過因為有了浮動,所以通常情況下我們還真不需要給元素設定position屬性!

但是某些特殊的情況下,我們不得不用到position屬性,那我們今天就講講position屬性的relative和absolute值

首先說relative ,相對定位。

怎麼理解呢?如果說我對某元素設定了相對定位,那麼首先這個元素他會跟其它的元素一樣,出現在文件流中它該出現的位置,然後,我們可以設定它的水平或垂直偏移量,讓這個元素相對於它在文件流中的位置的起始點進行移動。有一點要注意,

在使用相對定位時,就算元素被偏移了,但是他仍然佔據著它沒偏移前的空間。這裡值得注意的一點是:偏移可不是邊距,跟邊距是不一樣的。

我們先看看下圖:

上圖中有三個浮動的塊,第二個塊是設定了相對定位position:relative了的,這時大家看到它的位置並沒有其它什麼不同,跟其它兩個塊一樣都處在正常的文件流中。

接下來我給那個設定了position:relative的塊設定乙個偏移:left:50px ; top:30px 這時我們再看看效果:

這時我們發現第二個塊針對它本身位置的起始點進行了乙個偏移,但是它原來所佔據的那個位置空間依然還在(虛線框標示的地方),即使我們把偏移量設定得再大一點,使它完全離開原來的位置,它原來位於文件流中的位置仍然會存在,不會被第三個塊浮動過來填補掉。

同時,它的偏移也不會把別的塊從文件流中原來的位置擠開,如果有重疊的地方它會重疊在其它文件流元素之上,而不是把它們擠開,就像圖中那樣,它已經覆蓋在了第三個塊之上。

我們可以設定它的z-index屬性來調整它的堆疊順序。

接下來我們來看看絕對定位:position:absolute

被設定了絕對定位的元素,在文件流中是不佔據空間的,如果某元素設定了絕對定位,那麼它在文件流中的位置會被刪除,那這個元素到哪去了呢?它浮了起來,其實設定了相對定位relative時也會讓該

元素浮起來,但它們的不同點在於,相對對定位不會刪除它本身在文件流中佔據的那塊空間,而絕對定位則會刪除掉該元素在文件流中的位置,完全從文件流中抽了出來,我們可以通過z-index來設定它們的堆疊順序

。那麼絕對定位是如何定位的呢?首先,如果它的父元素設定了除static之外的定位,比如position:relative,或者position:absolute以及position:fixed,那麼它就會相對於它的父元素來定位,位置通過left

, top ,right ,bottom屬性來規定,如果它的父元素沒有設定定位,那麼就得看它父元素的父元素是否有設定定位

,如果還是沒有就繼續向更高層的祖先元素類推,總之它的定位就是相對於設定了除static定位之外的定位(比如position:relative)的第乙個祖先元素,如果所有的祖先元素都沒有以上三種定位中的其中一種定位,那麼它就會相對於文件body來定位(並非視窗,相對於視窗定位的是fixed)

絕對定位的元素相對於誰來定位,我們就把這個"誰"叫著參照物,我們結合上面的講解來看看下圖就明白了 :

我們看一下在瀏覽器裡的效果,我們先看看沒有使用絕對定位時的樣子:

然後我們給第二個塊設定絕對定位:position:absolute 然後再設定乙個偏移:left:150px;top:40px; 這時就變成了下圖所示:

還有一點就是:在設定偏移量的時候,我們可以設定負值。

**:

詳解CSS的相對定位和絕對定位

css的相對定位和絕對定位 通常情況下,我們元素的position屬性的值預設為static 就是沒有定位,元素出現在正常的文件流中,這個時候你給這個元素設定的left,right,bottom,top這些偏移屬性都是沒有效果的,不會生效,比如你設定乙個距離左邊距偏移100px的宣告 left 10...

詳解CSS的相對定位和絕對定位

css的相對定位和絕對定位 通常情況下,我們元素的position屬性的值預設為static 就是沒有定位,元素出現在正常的文件流中,這個時候你給這個元素設定的left,right,bottom,top這些偏移屬性都是沒有效果的,不會生效,比如你設定乙個距離左邊距偏移100px的宣告 left 10...

詳解CSS的相對定位和絕對定位

css的相對定位和絕對定位 通常情況下,我們元素的position屬性的值預設為static 就是沒有定位,元素出現在正常的文件流中,這個時候你給這個元素設定的left,right,bottom,top這些偏移屬性都是沒有效果的,不會生效,比如你設定乙個距離左邊距偏移100px的宣告 left 10...