html中的“position：absolute”是絕對定位，一般配合“top”和“left”屬性同時使用。

1、新建html文件，在body標籤中新增一個div，然後在這個div中再新增一個div，這時預設情況下內div在外div的左上角：

2、為內div新增“position”屬性，屬性值為“absolute”，外div新增“position”屬性，屬性值為“relative”，這時內div會向外div絕對定位：

3、為內div設定距離頂部距離屬性“top”和距離左側屬性“left”，這時內div會向外div做指定距離的定位：

1、“position：absolute”是絕對定位的意思，單純的使用absolute屬性並不會其效果，需要配合“topbottom leftright”屬性才能看到效果。首先需要新建一個html檔案，這裡定義了10個換行符，換行符的下面定義一個div：

2、此時儲存檔案，開啟瀏覽器可以看到div在瀏覽器的下方位置，接下來來設定絕對定位，讓div顯示在任意位置：

3、給divc的class使用absolute屬性, 並使用上下左右位置屬性，設定向上和向左分別50px，接著儲存檔案：

4、再次開啟瀏覽器，可以看到div的位置在瀏覽器上方，覆蓋了換行符的位置：

position：absolute
日常開發中經常涉及元素的定位，我們都知道，絕對定位相對於最近position不為static的父級元素來定位，但其中定位的位置還是有細微的差別的。

絕對定位根據left和top屬性來規定絕對定位元素的位置。
但這個位置實際上與padding和父級相對定位的box-sizing有關的。

* 預設盒子的box-sizing為content-box（即盒子所佔據的寬度=width+padding）

情況一： 正常盒模型box-sizing:content-box; 同時沒有top和left的情況

上圖：盒模型，在left和top沒有定義時，相對於父級定位元素的content（內容區width）定位

情況二： 正常盒模型box-sizing:content-box; 規定top和left的值

效果圖：

上圖：在定義了top和left屬性時，相對於父級元素的佔位區定位（包含padding區域）

情況三：盒模型box-sizing:border-box; 沒有top和left的值

情況四：盒模型box-sizing:border-box; 同時規定top和left的值

綜上所述：
無論父級盒子是正常顯示還是以border-box顯示，在沒有規定left和top的屬性值時，都呈現在父級盒子的內容區（不包含padding）左上角
若規定了left：0；top：0；則統一相對父級盒子的左上角顯示（包含padding）