CSS中position屬性詳解
position的定位模型有五中,分別為static、relative、absolute、fixed、sticky。
同時,這五中定位模型可以被繼承。既inherit。
操作的屬性分別為top left right bottom z-index.
1.static 自然定位
作用:是元素定位於常規/自然流中
特點:
忽略top,bottom,left,right,z-index宣告
相鄰兩個元素如果都設定了外邊距,那麼最終外邊距=兩者外邊距中最大的
具有固定width和height值的元素,如果把左右外邊距設定成為auto,則左右外邊距會自動擴大佔滿剩餘寬度。造成這個快水平居中的效果
2.relative 相對定位
作用:使元素稱為可定位的祖先元素
特點:
可以使用 top,right,bottom,left,z-index進行相對定位----?相對於自己在常規流的位置
相對定位的元素不會離開常規流
任何元素都可以設定為relative,他的絕對定位的後代都可以相對於它進行絕對定位-------好用
可以是浮動元素髮生偏移,並控制其堆疊順序
3.absolute 絕對定位
作用:使元素脫離常規流
特點:
脫離常規流
設定尺寸要注意百分比比的是誰--------最近定位的祖先元素
lrtb(left,right,bottom,top)如果設定為0,它將對齊到最近定位祖先元素的各邊-----形成一個居中的效果
lrtb若設定為auto它將恢復到常規流中
如果沒有最近定位祖先元素,那他的祖先元素就是body
z-index可以控制堆疊順序
3.fixed:固定定位
作用:跟絕對定位相似
特點:
跟absolute的區別?------相對於視口做絕對定位
固定定位的元素不會隨著視口滾動而滾動
繼承absolute特點
4.sticky----吸附定位(需要配合偏移量使用。eg:top=0;)
作用:relavtive+fixed的完美結合,製造出吸附效果
特點:
如果產生偏移,原位置還在常規流中保留
如果他的最近祖先元素有滾動,那麼他的偏移標尺就是最近的祖先元素
如果最近祖先元素沒有滾動,那麼他的偏移標尺是視口
注意:各瀏覽器對於吸附定位的相容性有所不同,可通過www.caniuse.com檢視各瀏覽器對css屬性的支援情況