relative absolute fixed三種定位差異

relative：

生成相對定位的元素，相對於其正常位置進行定位。

元素的位置經過left、right、top、button屬性進行規定，

能夠經過z-index進行層次分級。

元素元素仍保持其未定位前的形狀，本來所佔的空間仍將保留。

若是沒有定位偏移量，對元素自己沒有任何影響

absolute：

生成絕對定位元素。使元素脫離文檔流，並相對於其包含塊進行定位，包含塊多是文檔中的另外一個元素或者是初始包含塊，

元素原先在正常文檔流中所佔的空間會會被後面元素佔據；

元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框；

絕對定位元素的包含塊由離它最近的 'position' 屬性爲 'absolute'、'relative' 或者 'fixed' 的祖先元素建立。只要父級元素設置了position而且不是static（默認既是static），那麼設定了absolute的子元素即以此爲包含塊（最近的）。若是都沒有定義，那麼就相對於整個文檔body定位（注意不是相對於瀏覽器窗口定位）

相對定位通常都是配合絕對定位元素使用

fixed：生成絕對定位元素，相對於瀏覽器窗口的定位。一般配合z-index一塊兒來使用。好比說網頁上懸掛的聊天圖標或者廣告就是用了fixed

做者：平淡的茶葉壺連接：https://www.zhihu.com/question/53545802/answer/135467197來源：知乎著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。