1、絕對定位

絕對定位指的是透過規定HTML元素在水平和垂直方向上的位置來固定元素，基於絕對定位的元素不會佔據空間。

絕對定位的位置宣告是相對於已定位的並且包含關係最近的祖先元素。如果當前需要被定為的元素沒有已定位的祖先元素作為參考值，則相對於整個網頁。

position：absolute；

<！DOCTYPE html>

如圖所示，藍色的盒子是相對於整個大盒子而言的，但是，當藍色盒子外層沒有設定有定位的大盒子包裹，則藍色盒子會的絕對定位會相對與整個螢幕。

2、相對定位

position：relative；

相對定位與絕對定位的區別在於它的參照點不是左上角的原點，而是該元素本身原先的起點位置。並且即使該元素偏移到了新的位置，也仍然從原始的起點處佔據空間。

<！DOCTYPE html>

此時我們以第三個盒子，黃色的盒子為例，此時我們將它的相對定位註釋掉，它的執行結果是這樣的。

當我們給他加上相對定位，position：relative；執行結果是這樣的，它以自身原先的位置為參照物向上向右移動，但是當它移動之後，它原本下面的綠色盒子沒有往上移動，佔據它的位置，也就是說，使用相對定位會佔據位置，而固定定位不會，以剛剛那個黃色盒子和綠色盒子為例，如果黃色盒子使用絕對定位給他定位，當黃河盒子移走之後，綠色盒子會往上移，佔據之前黃色盒子的位置。

3、固定定位

position：fixed；

固定定位永遠都會相對於瀏覽器視窗進行定位，固定定位會固定在瀏覽器的某個位置，不會隨捲軸滾動。最常用的就是電腦裡面是不是彈出的小廣告，如果你不差掉它，當時滑動滑鼠檢視網頁時，小廣告一直會在那裡，還有常用的就是網站或者APP的導航欄和底部的選擇欄。

原文地址：HTML定位——絕對定位和相對定位、固定定位 - cz11 - 部落格園

作者：cz11