眾所周知，前端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，值越大層級越高。


影響蚌埠網站建設成本的因素
討論平面網站設計的未來
SEO中的建設內容很重要
企業SEO如何做引流并實現轉化？
南昌網站優化：偽靜態頁面損失了對搜索引擎的友好面該怎么辦
網站建設公司如何選擇？這樣選擇不會錯
SEO如何防止網站被掛黑鏈
闡述整站seo優化與關鍵詞推廣哪一個更利于業務拓展？