關於絕對定位與相對定位的區別和用法

2021-10-20 04:00:44 字數 1451 閱讀 7860

相對定位及其用法

顧名思義相對定位的意思是相對於該控制項相對於之前的位置進行偏。相對定位的css樣式**是這樣的:position:relative;前面的單詞代表了相對定位的屬性,後面的單詞代表了相對定位的屬性值。倘若我們不設定定位型別,那麼它的預設值是這樣的:position:static;下面我們來舉個例子:

css部分:

.d1

html部分:

class

="d1"

>

class

="d2"

>

div>

div>

執行後我們會發現:黃色小方塊距離邊框有一段距離,這就假設了這個小方塊相對於原文件流的位置,現在我們來看相對定位對它是怎樣的影響,我們在css中加入以下相對布局**:

.d2

執行後我們會發現,黃色小方塊相對於自己原來的位置向左偏移了20px,而不是相對與d1左邊框進行的偏移,這就是相對定位。

絕對定位及其用法

絕對定位的意思是相對於該控制項相對於整個瀏覽器的位置進行偏。絕對定位的css樣式**是這樣的:position:absolute;前面的單詞代表了絕對定位的屬性,後面的單詞代表了絕對定位的屬性值。它還有另乙個屬性值:position: fixed;他倆的區別很簡單:1、沒有滾動條的情況下沒有差異

2、在有滾動條的情況下,fixed定位不會隨滾動條移動而移動,而absolute則會隨滾動條移動,我們平常在瀏覽網頁是那「揮之不去」的小廣告就是用的這種定位。倘若我們不設定定位型別,那麼它的預設值是這樣的:position:static;

下面我們來舉個例子:

css部分:

.d1

html部分:

class

="d1"

>

class

="d2"

>

div>

div>

執行後我們會發現:黃色小方塊距離邊框有一段距離,這就假設了這個小方塊相對於原文件流的位置,現在我們來看絕對定位對它是怎樣的影響,我們在css中加入以下**:

.d2

執行後我們會發現,黃色小方塊相對於自己原來的位置向左偏移了20px,而不是相對與d1左邊框進行的偏移,這就是絕對定位。

5. 二者的區別

簡單來說相對定位是根據自己原來的位置進行定位,絕對定位是根據整個瀏覽器進行定位,固定定位於絕對定位一樣不過固定定位不隨著螢幕的滾動而滾動。

6. 鏈結

如果上面的內容還是讓你存有一些疑惑,那我們不如一起去看看官方的解答吧—>菜鳥教程。

關於相對定位與絕對定位的區別

之前一直搞不明白html中positon relative 和 position absolute 這兩個屬性。這裡記錄一下。理論解釋 相對定位 該元素相對於自己原有位置,偏移一定距離。相對的是自己。絕對定位 該元素相對於其父元素,偏移一定距離。相對的是父元素,重點是這個父元素也需要是設定了posi...

關於相對定位與絕對定位

1.相對定位 相對自身正常位置的偏移 position relative 1 top 10px left 10px 2 bottom 10px right 10px 兩種情況如下所示 綠色塊狀為初始正常位置,橙色指的是給它相對定義後的位置 2.絕對定位 指相對于父元素的四個方向 top,left,r...

關於絕對定位和相對定位

relative相對定位 相對於本身的位置進行偏移。absolute絕對定位 相對於非static的祖先元素進行位置偏移,當這樣的元素不存在,則相對於根級容器定位。經驗告訴我們 當乙個元素使用relative定位而使位置發生改變時,其他的定位依賴於它的元素的位置不會改變,就好像這個元素沒有改變位置一...