絕對定位absolute和浮動定位float的異同

2021-09-24 07:55:59 字數 1646 閱讀 6212

absolute:生成絕對定位的元素, 相對於最近一級的定位不是 static 的父元素來進行定位。

fixed(老ie不支援):生成絕對定位的元素,通常相對於瀏覽器視窗或 frame 進行定位。

relative:生成相對定位的元素,相對於其在普通流中的位置進行定位。

static:預設值。沒有定位,元素出現在正常的流中

sticky:生成粘性定位的元素,容器的位置根據正常文件流計算得出

absolue定位效果如下

#test1

#test2

#test4,#test5

#test6

我是div標籤

我是span標籤

我是普通行內標籤

我是普通塊級標籤1

我是普通塊級標籤2

我是普通行內標籤

我是普通行內標籤

複製**

float定位效果如下

#test1

#test2

#test4

我是div標籤

我是span標籤

我是普通行內標籤

我是普通塊級標籤1

我是普通塊級標籤2

我是普通行內標籤

複製**

結果分析:

定位方式

行內元素

塊級元素

absolue

可以讓元素脫離文件流,表現的跟塊級元素一樣,可以設定寬和高,也可以設定top、left、bottom和right

脫離文件流,可以設定top、left、bottom和right

float

表現的跟行內塊級元素一樣,仍會佔據位置。float為left時,位於浮動元素的左邊行內元素會出現在右邊、float為right時,位於浮動元素的右邊行內元素會出現在左邊。

元素是浮動的,會浮動在塊級元素之上。 並且定位為float的元素如果完全覆蓋住塊級元素或覆蓋部分時,塊級元素中的文字部分將會顯示在浮動元素的正下方(正常的會計元素文字是出現在塊級元素內部的頂部位置)

共同點:

對元素(無論塊級元素、行內元素)設定float和absolute屬性,可以讓元素脫離文件流,並且可以設定其寬高。

不同點:

1、對行內元素來說,定位為float的元素就相對為行內塊級元素,仍會佔據位置。float為left時,位於浮動元素的左邊行內元素會出現在右邊、float為right時,位於浮動元素的右邊行內元素會出現在左邊;

2、對塊級元素來說,定位為float的元素是浮動的,會浮動在塊級元素之上。並且定位為float的元素如果完全覆蓋住塊級元素或覆蓋部分時,塊級元素中的文字部分將會顯示在浮動元素的正下方(正常的塊級元素文字是出現在塊級元素內部的頂部位置)。

3、position為absolute的元素會覆蓋文件流中的其他元素(無論行內元素和塊級元素)。並且按照dom元素在文件中的位置,位置低的會覆蓋位置高的。就如同位置越低的元素z-index值越大一樣。

4、浮動的元素會漂浮在文件普通流的塊塊級元素上。但是會漂浮在絕對定位的元素之下。

絕對定位(absolute

絕對定位 absolute 作用是將被賦予此定位方法的物件從文件流中拖出,使用left,right,top,bottom等屬性相對於其最接近的乙個最有定位設定的父級物件進行絕對定位,如果物件的父級沒有設定定位屬性,即還是遵循html定位規則的,則依據 body 物件左上角作為參考進行定位。絕對定位物...

CSS中絕對定位 absolute

position absolute 絕對定位使元素的位置與文件流無關,因此不佔據空間。這一點與相對定位不同,相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對於它在普通流中的位置。絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊...

絕對定位absolute精講

一直沒搞清楚position absolute relative fixed static 等值 下文是absolute的精講 relative 相對於自身原來的位置定位。fixed 和absolute差不多 一般預設position的值是static 絕對定位基本特徵 絕對定位的第乙個特徵在於會從...