為什麼需要定位元素?

定位元素可以實現 :

• 某個元素可以自由地在一個盒子內移動位置，並且壓住其他盒子
• 當滾動窗口的時候，盒子是固定屏幕某個位置的

所以 :

• 浮動是可以讓多個塊級盒子一行沒有縫隙排列顯示，經常用於橫向排列盒子
• 定位則是可以讓盒子自由的在某個盒子內移動位置或者固定屏幕中某個位置，並且可以壓住其他盒子

定位就是將盒子定在某一個位置

所以定位也是在擺放盒子，按照定位的方式移動盒子。

• 定位 = 定位模式 + 邊偏移

定位模式用於指定一個元素在文檔中的定位方式。

邊偏移則決定了該元素的最終位置

1. 定位模式

定位模式決定元素的定位方式，通過CSS的 position屬性來設置 分為四種

/*
position: static;       靜態定位 
position: relative;     相對定位
position: absolute;     絕對定位
position: fixed;        固定定位
*/

a. 靜態定位 static

靜態定位是元素的默認定位方式，無定位的意思

語法 :

選擇器 { position:static;}

備註 :

• 靜態定位按照標準布局特性擺放位置，沒有邊偏移

b. 相對定位 relative (重要)

相對定位是元素在移動位置的時候，以相對它原來的位置來設為標準

語法 :

選擇器 { position:relative;}

備註 :

• 移動的時候參照點是自己原來的位置
• 不脫離標準布局，繼續保留原來位置
• 相對定位並沒有脫標，最典型的應用是給絕對定位的父盒子使用

c. 絕對定位 absolute (重要)

絕對定位是元素在移動位置的時候，是看父元素來進行移動的

語法 :

選擇器 { position:absolute;}

備註 :

• 沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準進行定位
• 如果祖先元素有定位，則以最近一級的有定位祖先元素為參考移動位置
• 絕對定位不在佔有原本的位置 (脫離標準定位)

PS : 絕對定位的盒子居中

加了絕對定位的盒子不能透過 margin:0 auto水平居中

但是可以通過以下計算方法實現水平和垂直居中

水平居中
*/* 1. left 走 %50 */*
*/* 2. margin-left 負值 往左邊走 自己盒子寬度的一半 */*

垂直居中
*/* 1.top 走 %50 */*
*/* 2. margin-top 負值 往下邊走 自己盒子高度的一半 */*

d. 固定定位 fixed (重要)

固定定位是元素固定於瀏覽器可視區的位置

主要使用場景 : 可以在瀏覽器頁面滾動時元素的位置不會改變

語法 :

選擇器 { position: fixed;}

備註 :

1. 以瀏覽器的可視窗口為參照點移動元素

• 跟父元素沒有任何關係
• 不跟隨滾動條滾動

2. 固定定位不在佔有原先的位置

• 固定定位也是脫離標準流，固定定位也可看作是一種特殊的絕對定位
• 固定定位小技巧 : 固定在板心右側的位置

算法 :

1. 讓固定定位的盒子 left : 50% 走到瀏覽區可視區(也可以看作板心) 的一半位置

2. 讓固定定位的盒子 margin-left : 版心寬度的一半距離。
   多走板心寬度的一半位置，就可以讓固定定位的盒子貼著板心右側對齊

e. 黏性定位 sticky

黏性定位可以被認為是相對定位和固定定位的混和。

語法 :

選擇器 { position:sticky; top: 10px;}

備註 :

• 以瀏覽器的可視窗口為參照點移動元素( 固定定位特點 )
• 黏性定位占有原先的位置 ( 相對定位特點 )
• 必須添加 top , left , right , bottom 其中一個才有效，跟頁面滾動搭配使用。兼容性較差 IE不支持