相對(duì)定位：相對(duì)自己本身進(jìn)行偏移

CSS語(yǔ)法：

position: relative;/*相對(duì)自己進(jìn)行定位*/
top: 10px;/*距離上邊*/
left: 10px;/*距離左邊*/

演示圖：

---

?絕對(duì)定位：默認(rèn)以瀏覽器進(jìn)行定位。如果想依照父盒子定位，需要在父盒子中設(shè)置一個(gè)不設(shè)置偏移量的相對(duì)定位，再在子盒子中設(shè)置絕對(duì)定位，這樣就是依照父盒子進(jìn)行絕對(duì)定位。

CSS語(yǔ)法：

參照瀏覽器：?

position: absolute;/*絕對(duì)定位*/
top: 10px;/*距離上邊*/
left: 10px;/*距離左邊*/

參照父盒子：

/*假設(shè)box是box1的父盒子，此時(shí)我想讓box的子盒子參考父盒子box進(jìn)行絕對(duì)定位，則分兩步：1.在父盒子設(shè)置一個(gè)不帶偏移量的相對(duì)定位。2.在子盒子設(shè)置絕對(duì)定位。*/.box{width: 800px;height: 800px;position: relative;/*1.設(shè)置一個(gè)不帶偏移量的相對(duì)定位。*/}.box1{width: 300px;height: 300px;position: absolute;/*2.設(shè)置絕對(duì)定位。這樣就是參照box盒子進(jìn)行定位*/top: 10px;/*距離上邊*/left: 10px;/*距離左邊*/}

演示圖：

注意：

一、絕對(duì)定位的盒子垂直居中

1.把top設(shè)為50%

2.margin-top設(shè)為負(fù)自己盒子高度的一半

?二、絕對(duì)定位的盒子水平居中

1.把left設(shè)為50%

2.margin-left設(shè)為負(fù)自己盒子寬度的一半

---

固定定位：位置固定在頁(yè)面的位置上

---

絕對(duì)定位堆疊順序：把盒子放在最上面到最下面的順序。相對(duì)于其他盒子設(shè)置的z-index，設(shè)置z-index的值最大，則該盒子在最上面。

CSS語(yǔ)法：

z-index: 9999;/*相對(duì)于其他盒子設(shè)置的z-index，設(shè)置z-index的值最大，則該盒子在最上面*/