一、定位的使用場景？
定位的使用場景比較多,比如下面的圖片就能顯示出定位的重要性
二、定位屬性
元素的定位屬性主要包括定位模式和邊偏移兩部分
- 邊偏移
- top 頂端偏移量，定義元素相對於其父元素上邊線的距離
- left 左側偏移量，定義元素相對於其父元素左邊線的距離
- right 右側偏移量，定義元素相對於其父元素右邊線的距離
- bottom 底部偏移量，定義元素相對於其父元素下邊線的距離
- 定位模式
- static 自動定位（默認定位方式）
- relative 相對定位，相對於其原文檔流的位置進行定位
- absolute 絕對定位，相對於其上一個已經定位的父元素進行定位
- fixed 固定定位，相對於瀏覽器窗口進行定位
三、定位模式
- 靜態定位（static）
- 網頁中所有元素都默認是靜態定位，標準流的特性
- 在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置
- 相對定位（relative）
- 相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值爲relative時，可以將元素定位於相對位置
- 對元素設置相對定位後，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。
- 相對定位可以通過邊偏移移動位置，但是原來的所佔的位置，繼續佔有
- 每次移動的位置，是以自己的左上角爲基點移動（相對於自己來移動位置）
- 絕對定位（absolute）
- 當position屬性的取值爲absolute時，可以將元素的定位模式設置爲絕對定位
- 絕對定位兩種情況
① 父級沒有定位:若所有父元素都沒有定位，以瀏覽器爲準對齊(document文檔)
② 父級有定位:依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位 - 可以通過邊偏移移動位置，完全脫離標準流，完全不佔位置
- 子絕父相
① 子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以）
② 因爲子級是絕對定位，不會佔有位置， 可以放到父盒子裏面的任何一個地方
③ 父盒子佈局時，需要佔有位置，因此父親只能是 相對定位
- 固定定位（fixed）
- 固定定位的元素跟父親沒有任何關係，只認瀏覽器
- 固定定位完全脫標，不佔有位置，不隨着滾動條滾動
四、疊放次序（z-index）
- 當對多個元素同時設置定位時，定位元素之間有可能會發生重疊
- 在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可爲正整數、負整數和0。
- 使用注意
① z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上；
② 如果取值相同，則根據書寫順序，後來居上；
③ 後面數字一定不能加單位；
④ 只有相對定位，絕對定位，固定定位有此屬性，其餘標準流，浮動，靜態定位都無此屬性，也不可指定此屬性。
喜歡的關注下公衆號哦,每天都有新的博文推送哦
