定位和position定位

2022-07-30 00:57:21 字數 1096 閱讀 2563

定位有:普通流定位 、浮動定位 、相對定位 、 絕對定位 、 固定定位

特點普通定位:被稱為文件流定位,是頁面元素預設的定位方式(塊級:從上到下,獨佔一行;行級:從左到右,不獨佔一行)

浮動定位:

1.浮動元素脫離文件流,未浮動元素上前補位

2.浮動元素會停靠在父級元素的左邊或者右邊,亦或者緊跟其他元素邊緣

3.浮動元素只會在當前行內

4.浮動只在父級元素內

5.多個塊級元素處於一行

浮動引發的效果

當父元素的width顯示不下所有浮動元素時,最後乙個元素換行,元素浮動起來,對行內元素影響最大

文字、行內元素、行內塊元素,採用文字環繞的方式排列,是不會被浮動元素壓在底下,會巧妙避開浮動元素

清除浮動(只有三個值)

clear:left;right,both  

浮動元素對父級元素的影響

原因:如果父級元素的hight沒有設定或者沒設定自適應,當部分元素全部浮動起來,父級hight為0

解決方法

1>.直接給父級設定px高

弊端:需要準確的px高

2>.設定父級浮動

弊端:對後繼元素有影響

3>.為父級設定overflow:hidden

弊端:如果子集內容有溢位顯示,會被一同隱藏

4>.父元素追加空元素  設定clear清楚浮動

position定位

1、static  預設定位      

2、relative 相對定位 :原位置保留, 原來位置左上角進行偏移

使用場合:元素位置的微調

3、absolute 絕對定位:  脫離文件流,相對於body進行位置偏移

注意:我們一旦設定絕對定位後,元素就具有漂浮效果

4、fixed 固定定位 : 脫離文件流,不受滾動條影響,body標籤左上角進行位置偏移

5、relative和absolute的結合使用:在偏移的父元素內新增相對定位,在該元素內新增絕對定位

使用場合

多個塊級元素在一行內顯示,浮動

元素實現自身位置的微調,相對定位

實現彈出內容和排版時,絕對定位和相對定位的結合

頂部固定 左邊導航固定 廣告,固定定位

Position 絕對定位和相對定位

position絕對定位和相對定位 css中絕對定位和相對定位即position屬性 position static absolute fixed relative static 靜態absolute 絕對定位fixed 固定relative 相對定位 static 無特殊定位,物件遵循html定位...

position 相對定位和絕對定位

定位標籤 position 包含屬性 relative 相對 absolute 絕對 1.position relative 如果對乙個元素進行相對定位,首先它將出現在它所在的位置上。然後通過設定垂直或水平位置,讓這個元素 相對於 它的原始起點進行移動。再一點,相對定位時,無論是否進行移動,元素仍然...

定位屬性position,相對定位,絕對定位

在css中關於定位的內容是 position relative absolute static fixed static 自動定位,自動定位就是元素在頁面普通文件流中由html自動定位,普通文件裡中的元素也稱為流動元素。不能通過z index進行層次分級。relative 相對定位,相對定位不脫離文...