定位流

<!--定位流的分類-->
1.相對定位(相對自己以前在標準流中的位置 相對定位不會脫離標準流 會繼續在標準流中佔用一份空間
所以不利於佈局頁面) 注意點 相對定位是不拖離標準流的 還會在標準流裏面佔用空間
position:relative 結合 top:: right:: bottom:: left:: 使用
(同一個方向上只能有一個定位屬性) 區分行內元素/行內塊級元素/塊級元素
添加margin padding時是給我們之前相對自己以前在標準流中的位置添加此屬性
作用:用於對元素進行微調/配合而後面學習的絕對定位來使用
2.絕對定位  position: absolute;(默認情況下絕對定位的元素會以body作爲參考點 所以會隨着遊覽器的寬度高度的變化而變化)
絕對定位是相對於body進行定位
注意點 絕對定位的元素是脫離標準流的 絕對定位的元素是不區分塊級元素/行內元素/行內塊級元素的
規律 默認情況下所有絕對定位的元素 無論有沒有祖先元素 都會以body作爲參考點(那麼其實是以網頁首屏的寬度和高度作爲參考點)
只要是絕對定位元素的祖先元素都可以
指的定位流是指絕對定位/相對定位/固定定位
定位流中只有靜態定位不行
若果一個絕對定位的元素有祖先元素
並且祖先元素也是定位流,而且祖先元素中多個元素都是定位流,那麼這個絕對定位的元素會以離它最近的那個定位流的祖先元素爲參考點
絕對定位元素會忽略父元素的padding

子絕父相(子元素用絕對定位 父元素用相對定位)

如何讓絕對定位的元素水平居中 只需要設置絕對元素的left:50% 然後再設置絕對定位的元素 margin-left -元素寬度的一半
3.固定定位
固定定位的元素是脫離標準流的 不會佔用標準流的空間
固定定位和絕對定位一樣不區分行內/塊級/行內塊級

4.靜態定位
一個元素就是靜態定位
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章