css的float,position屬性詳解
阿新 • • 發佈:2019-02-02
- 文件流
HTML頁面的標準文件流(預設佈局)是:從上到下,從左到右,遇塊(塊級元素)換行。
- z-index屬性
網頁雖然看起來是平面的二維結構,但其實是有z軸的,z軸的大小由z-index控制,預設情況下所有元素都在z-index:0這一層裡。
設定position:relative或positive:absolute會讓元素浮起來,即z-index大於0,改變正常文件流。
float屬性
給元素的float屬性賦值後,就是脫離文件流,進行左右浮動,緊貼著父元素的左右邊框。
1.左浮動的情況
2.右浮動的情況
position屬性
- absolute
生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。 - fixed
生成絕對定位的元素,相對於瀏覽器視窗進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。 - relative
生成相對定位的元素,相對於其正常位置進行定位。
因此,”left:20” 會向元素的 LEFT 位置新增 20 畫素。 - static 預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。
- inherit 規定應該從父元素繼承 position 屬性的值。
position屬性與float屬性的異同
- position 和float都會改變display的型別為inline-block,可以設定寬高,預設寬度不佔滿父元素。(relative不會)
- relative和absolute都會讓元素z-index屬性大於0,而float雖然也改變文件流,它仍然讓元素在z-index:0層排列。