眾所周知,前端CSS中,盒模型、浮動、定位為必須掌握的三座大山。
今天就來聊聊定位的那些事。
定位是什麼?
先來看看哪些場景用到定位,如下圖所示,凡是有盒子壓住另一個盒子的地方都可定位,因為用浮動做不了,如果盒子浮動,會並排但不會出現有層級的觀感。所以想要有層級的觀感,就得用定位。
簡單來說,定位就是將盒模型中的盒子顯示在我們想要的位置。
定位的語法
定位由position屬性和邊偏移屬性組成。
position屬性語法為:{position:屬性值},常用值如下:
邊偏移屬性語法為:{邊偏移:屬性值},常用值如下:
定位模式和用法
1、 靜態定位static
靜態定位具備標準流特性,所有元素默認靜態定位,靜態定位不能通過設置邊偏移改變位置。
靜態定位的作用:取消定位。
2、 相對定位relative
相對定位在標準流中,採用相對定位的盒子仍然佔用原來的位置。每次移動位置,以自己的左上角為基點移動(相對於自己移動位置)
3、 絕對定位absolute
絕對定位不具備標準流特性,採用絕對定位的盒子在設置邊偏移後不佔位置。
絕對定位的盒子在父級沒有定位時,以瀏覽器為準對齊;當父級有定位,依據最近的已定位的父元素進行定位。
4、 固定定位fixed
固定定位不具備標準流特性,不佔位置,始終以瀏覽器為標準顯示位置,不管瀏覽器滾動和窗口大小,fixed顯示固定。
終極用法口訣:子絕父相,或子絕父絕。
就是說,在實際開發過程中,子盒子採用絕對定位,那麼父盒子必定採用相對定位或絕對定位。
如果要實現絕對定位的盒子水平或垂直居中需要採用一定的算法。因為加定位有偏移和浮動的盒子通過設置margin值實現水平居中失效。那麼採用以下方法:
先設置左邊偏移50%,50%表示父盒子的一半,即left:50%。再設置自己盒子外邊距為盒子寬度負的一半,即margin-left:-width/2。
定位模式轉換
當盒子加fixed和absolute定位,元素轉換為行內塊元素。
如果盒子固定定位,當盒子內容為空時,盒子的高度會為0,為避免這種情況可設置盒子的寬高,再設置下面的盒子的margin值,可實現top通欄固定不動。如下圖的首頁展示固定top通欄。
層級z-index
當定位元素重疊,可通過z-index設置層疊次序。
層級z-index只針對定位的元素,標準流和浮動不具備該屬性。
層級z-index的用法:z-index:2;後面沒有單位。
採用相對定位比標準流高一層級,浮在上面。盒子已經用相對定位,但是滑鼠放上去還想用相對定位,就可用z-index。取值相同時,根據書寫順序,後來居上。默認為0,值越大層級越高。(部分圖片來源網絡截圖,若侵權,聯繫刪除)