定位知識體系概覽：

• 元素的定位屬性
  • 邊偏移
  • 定位模式（定位的分類）
• 靜態定位（static）
• 相對定位（relative）
• 絕對定位（absolute）
  • 父級沒有定位
  • 父級有定位
  • 子絕對定位 父相對定位（子絕父相）
  • 絕對定位水平垂直居中
• 固定定位（fixed）
• 疊放次序（z-index）
• 四種定位總結
• 定位模式轉換

元素的定位屬性

• 元素的定位屬性主要包括 定位模式 和 邊偏移兩部分。

邊偏移

定位模式（定位的分類）

• 在CSS中，position 屬性用於定義元素的定位模式，基本語法格式如下：

選擇器 {
  position：屬性值；      
}

position屬性的常用值

靜態定位（static）

• 網頁中預設的就是靜態定位；
• 對於邊偏移無效；
• 一般用來清除定位；
• 相對於文件流（HTML）

相對定位（relative）

• 相對定位 可以通過邊偏移移動位置，但是原來所佔的位置，移動後繼續佔有；
• 相對定位 移動時 是以自己的左上角為基點移動的（相對於自己來移動位置）
• 相對定位不脫離 標準流（即佔有位置）
• 浮動的主要目的是 讓多個塊元素在一行顯示，那麼定位就是 移動位置。

絕對定位（absolute）

• 絕對定位 是 完全脫離 標準流的（即不佔位置）

父級沒有定位

• 如果父級元素沒有新增定位，那麼絕對定位 是以瀏覽器為基準點對齊（document文件）；

父級有定位

• 如果父級元素有定位，那麼絕對定位 是以 最近的父級元素 為基準點對齊；

子絕對定位 父相對定位（子絕父相）

• 父級元素相對定位；不脫離 標準流；佔有位置
• 子級元素絕對定位；完全脫離 標準流；不佔位置

絕對定位水平垂直居中

• 絕對定位中 margin：0 auto；無效；
• 水平居中：
• 首先通過 left：50%；走父級元素寬度的一半；
• 然後通過 margin-left：-width px 走自己寬度的一半；
• 垂直居中：
  • 首先通過 top：50%；走父級元素寬度的一半；
  • 然後通過margin-top：-height px走自己寬度的一半；

固定定位（fixed）

• 固定定位 是 絕對定位 的一種特殊形式；
• 固定定位 以 瀏覽器視窗 作為基準點 來定義網頁元素；
• position：fixed；
• 脫離 標準流，始終依據 瀏覽器視窗 來定義自己的顯示位置；不管瀏覽器如何滾動、視窗大小如何變化，該元素都會始終顯示在瀏覽器視窗的固定位置；
• 固定定位有兩點：
  • 固定定位的元素 跟父級元素沒有任何關係，只認瀏覽器；
  • 固定定位完全脫離標準流，不佔位置，不隨著滾動條滾動；

疊放次序（z-index）

• 當對多個元素進行定位時，可能會出現疊加；想要調整重疊定位元素的堆疊順序，可以對定位元素應用 z-index 層疊等級屬性；
• 注意：
  • z-index 預設值為0，取值越大，定位元素在層疊元素中越居上；
  • 取值相同時，則根據書寫順序，後來者居上；
  • z-index：屬性值；屬性值一定不能加單位；
  • 只有 相對定位，絕對定位 和 固定定位 有z-index 屬性，其餘標準流、浮動、靜態定位都無此屬性，亦不可指定此屬性；

四種定位總結

定位模式轉換

• 跟浮動相同，元素添加了 絕對定位 和 固定定位 後，元素模式也會發生轉換，都轉為行內塊模式；
• 如果 行內元素 添加了 絕對定位 和 固定定位，那麼就不需要再對行內元素進行 display 模式轉換，而 直接設定寬高；