定位流有四個定位屬性可以用：right,left,top,bottom（記住同一方向只能使用一個）

1、相對定位：position: relative;

（1）相對定位是**不脫離標準流**的, 會繼續(xù)在標準流中占用一份空間
（2）相對定位就是相對于自己以前在標準流中的位置來移動

image.png

2、絕對定位：position: absolute;

（1）絕對定位的元素是**脫離標準流**的, 不會占用標準流中的位置
（2）絕對定位就是相對于body或者某個定位流中的祖先元素來定位
（3）絕對定位的元素是脫離標準流的, 所以絕對定位的元素不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素

3、固定定位：position: fixed;

作用：固定定位和前面學(xué)習的背景關(guān)聯(lián)方式很像, 背景關(guān)聯(lián)方式可以讓某個圖片不隨著滾動條的滾動而滾動, 而固定定位可以讓某個元素不隨著滾動條的滾動而滾動

注意點：

（1）固定定位的元素是脫離標準流的, 不會占用標準流中的位置
（2）固定定位的元素是脫離標準流的, 所以絕對定位的元素不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素

4、z-index屬性

用于指定定位的元素的覆蓋關(guān)系

• 定位元素的覆蓋關(guān)系:
  （1）默認情況下定位的元素一定會蓋住沒有定位的元素
  （2）默認情況下寫在后面的定位元素會蓋住前面的定位元素
  （3）默認情況下所有元素的z-index值都是0, 如果設(shè)置了元素的z-index值, 那么誰比較大誰就顯示在前面

• 定位元素的從父現(xiàn)象

（1）父元素沒有z-index值, 那么子元素誰的z-index大誰蓋住誰
（2）父元素z-index值不一樣, 那么父元素誰的z-index大誰蓋住誰

5、關(guān)于居中

• 因為絕對定位和固定定位脫離了標準流，自動轉(zhuǎn)化成了行內(nèi)塊元素，所以無法使用margin：0 auto；來水平居中，但是可以使用如下方法：
  水平居中：left:50%; margin-left:負寬度的一半
  垂直居中：top:50%; margin-top:負高度的一半
• 相對定位并沒有脫離標準流，沒有自動轉(zhuǎn)成行內(nèi)塊元素，所以可以使用margin：0 auto來水平居中

新學(xué)習的方法：

margin:  0 auto;
position: absolute;(position:fixed也適用)
left: 0px;
right: 0;