絕對定位

絕對定位
當浮動元素被設置爲絕對定位
某個元素
```
 float:left;
   position:absolute;
```
- 則他的float屬性會被強制設置爲none
- 絕對定位元素對其餘元素不會形成任何影響，原來的位置不會佔用
- 絕對定位的位置
可經過left，top，right，bottom來設置（四個方向均可取負值）
 絕對定位分類
 *  fixed 固定位置
 *  absolute 絕對位置

固定位置
包含塊：`position：fixed；`
參考位置：視口的左上角
設置此屬性的盒子會脫離文檔流
eg：若要將固定在右下角

    bottom：0px；
    right：0px；
若是是固定位置標籤，最好寫在結束標籤以前
絕對位置
包含塊：`position：absolute；`
參考位置：視口左上角
1. 依次判斷（從裏到外）元素是否擁有position不等於static的祖先元素；
2. 若是有，則該元素的填充盒的左上角爲當前絕對元素的起點；若是沒有，則以初始化包含塊的左上角爲元素的起點。

建議包含塊position屬性取值爲relative
緣由：不會破壞佈局，由於absolute或者fixed會脫離文檔流，下面文檔流會上移，破壞佈局。
##元素重疊的問題
堆疊級別：決定了元素誰顯示在前，誰顯示在後
一般狀況下，堆疊級別越高，顯示越靠前
設置：經過z-index屬性設置元素級別
z-index
元素屬性不可繼承；默認值：auto（書寫順序靠後的元素靠前顯示）；取值：auto，數值。
取值：正無窮到負無窮；（通常是（-1~5））
注意
 1. 不用於靜態位置的元素（通常用於固定位置（fixed）或者絕對位置（absolute））
 2. 儘可能不使用z-index
塊級格式化上下文
全稱：Block Formatting Content
簡稱：BFC
它是一個獨立的渲染區域，他規定了在該區域中常規流塊盒的佈局
解釋：
獨立的：不一樣的BFC區域，它們進行渲染時互不干擾（外邊距不合並）
BFC渲染區域：這個區域由某個HTML元素建立，如下元素會在其內部建立BFC區域：
根元素
浮動和絕對定位元素
overflow不等於visible的塊盒

具體規則
1. 建立BFC的元素，它的自動高度須要計算浮動元素
2. 建立BFC的元素，它的邊框盒不會與浮動元素重疊
3. 建立BFC的元素，不會與它的子元素進行外邊框合併

什麼時候用both和overflow
`clear：both；`：控制外面的東西不影響本身
`overflow`：控制BFC裏面的內容不影響其餘元素
eg：一個div標籤，有2個兄弟元素，3個子元素
當2個兄弟元素的定位體系影響到我，用clear；
當3個子元素影響到2個兄弟元素的位置時，就用overflow（即建立BFC）
雪碧圖
步驟：設置寬高  圖片路徑  圖標位置；