定位流分類：
一、相對定位：{position: relative;}
相對自己在以前標準流中的位置上右下左移動。要配合 (垂直方向top/bottom) / (水平方向left/right) 任何一組或二組使用才有效果。
/* 相對之前的位置上右下左移動 */
.box2 {background-color: blue; position: relative; top: 10px; left: 40px;}
注意：
-相對定位不脫離標準流，會繼續在標準流中占用一份空間，
所以不利于布書界面。當給相對定位設置 margin/padding屬性時，是對于定位之前的元素的margin/padding的設置，不是定位之后的。
-垂直方向top/bottom 只能寫一個
-水平方向left/right 只能寫一個
-由于相對定位是不脫離標準流的，所以相對定位區分 塊級元素、行內元素和行內塊級元素(不可設置寬高)。
- 應用場景：對元素進行微調，配合絕對定位來使用
二、絕對定位：{position: absolute;}
絕對定位是相對于 body 來進行定位的，定位到 body 的上下左右四個地方
.box02 {background-color: yellow; position: absolute; bottom: 0; right: 0;} /* 定位到 body 的右下角*/絕對定位的元素是脫離標準流的
絕對定位不區分 塊級元素、行內元素和行內塊級元素(可設置寬高)。
絕對定位的參考點：
1、默認情況下，無論有沒有祖先元素，所有絕對定位的元素都 會以 body 作為參考點。
2、如果一個元素有祖先元素A - B - aaabbbccc，
A是定位流B不是，子孫元素始終在A內部，A到哪它們到哪
A不是B是定位流，子孫元素始終在B內部，B到哪它們到哪
后面的子孫元素會以祖先元素的定位流作為參考點。
A和B都 是定位流，子孫元素以離他們最近的B定位流作為參考點進行定位。絕對定位的注意點
1、如果一個絕對定位元素以 body 作為參考點，其實是以網頁的首屏作為參考點，不是以整個網頁的寬度和高度作為參考點。
2、絕對定位流的元素會忽略祖先元素的padding屬性。子絕父相：子元素用絕對定位，父親元素用相對定位
/* 找到ul中的第4 個li /
ul li:nth-of-type(4) {background-color: orange; position: relative;} / 父相對 /
ul li img {position: absolute; left: 39px; top: -8px;} / 子絕對,數字是通過開發者模式調整出來的 */
- 絕對定位元素img的水平居中方式：
img {position: absolute; left: 50%; margin-left: -(負號)圖片寬度的一半px;}
三、固定定位：position:fixed
固定定位是脫離標準流的，是不占用標準流的空間的。
固定定位和絕對定位一樣，不區分行內、塊級、行內塊級元素。
固定定位和前面的關聯方式很像
背景定位可以讓背景圖片不隨著滾動條而滾動
而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動
四、靜態定位
z-index屬性：默認情況下所有的元素都 有一個默認的z-index屬性，取值是0
z-index屬性的作用是專門用來控制定位流元素的覆蓋關系的
1、默認情況下，定位流的元素會蓋住標準流的元素。
2、默認情況下，后面的定位流會蓋住前面的定位流元素。如果想要前面定位流的元素不被后面定位流的元素蓋住，可以把前面定位流的元素的 z-index 改大于前面的元素就行了，如 z-index:1 ;
3、從父現象：
- 如果兩個子元素的父元素都沒有設置 z-index，那么誰的 z-index 大，誰就顯示在最上面
- 如果兩個元素的父親元素都設置了 z-index，那么子元素的 z-index 就會失效，誰的父元素的 z-index 大，認就顯示在最上面。
