相對定位：

當元素被設置相對定位或是絕對定位後，將自動產生層疊，他們的層疊級別自然的高於文本流，除非設置其z-index值為負值。

並且我們發現當相對定位元素進行位移後，表面來看已經脫離了文本流，但是實際上在本文流中還為原來的相對對定位留下了原有的總寬與總高。

絕對定位：

相對定位只可以在文本流中進行位置的上下左右的移動，同樣存在一定的局限性，雖然他的表現區脫離了文本流，但是在文本流卻依然為其保留了一席之地，這個位置不隨他的移動而改變。

如果希望文本流拋棄這個部分就需要用到絕對定位。絕對定位不光脫離了文本流，而且在文本流中也不會給這個絕對定位元素留下專屬空位

在父層position屬性為默認值時，子層定位的坐標原點以body的坐標原點為起始。

當我們希望定位元素要有絕對定位的特性，但是又希望絕對定位的坐標原點可以固定在網頁中的某一個點時，我們可以為這個絕對定位的父級設置為相對定位或是絕對定位。那麽絕對定位的坐標就會以父級為坐標起始點。

但是要註意的是，這個參照點並不是父級的坐標原點，而是父級塊的padding左上邊緣點。

固定定位：

這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。換句話說，相對瀏覽器窗口定位.頁面如何滾動,這個盒子顯示的位置

要註意的點：

1.絕對定位之後,標簽就不區分所謂的行內元素,塊級元素了,不需要display:block;就可以設置寬高了。

2.如果用top描述,那麽定位參考點就是頁面的左下角,而不是瀏覽器的左上角,如果用bottom描述,參考的是瀏覽器首屏大小對應的頁面左下角。

3.絕對定位的盒子居中：絕對定位之後,所有標準流的規則,都不適用了.所以margin:0 auto;失效。

解決方法：當做公式記一下來.就是left:50%;margin-left:負的寬度的一半.

4.固定定位不兼容微信。

摘自:

https://blog.csdn.net/hackprogramer/article/details/27569233

https://www.cnblogs.com/gchlcc/p/6295199.html

CSS——相對定位、絕對定位、固定定位