1，static(默認)

當你沒有為一個元素(例如div)指定定位方式時，默認為static，也就是按照文檔的流式(flow)定位，將元素放到一個合適的地方。所以在不同的分辨率下，采用流式定位能很好的自適合，取得相對較好的布局效果。

一般來說，我們不需要指明當前元素的定位方式是static——因為這是默認的定位方式。除非你想覆蓋從父元素繼承來的定位系統。

left,top屬性對static沒有效果，static是靠margin這些定位的。

2，relative(相對定位)

在static的基礎上，如果我想讓一個元素在他本來的位置做一些調整(位移)，我們可以將該元素定位設置為relative，同時指定相對位移(利用top,bottom,left,right)。

有一點需要注意的是，相對定位的元素仍然在文檔流中，仍然占據著他本來占據的位置空間——雖然他現在已經不在本來的位置了。

3，absolute(絕對定位)

如果你想在一個文檔(Document)中將一個元素放至指定位置，你可以使用absolute來定位，將該元素的position設置為absolute，同時使用top,bottom,left,right來定位。

如果沒有父元素，位置是相對于body來進行的。

絕對定位會使元素從文檔流中被刪除，結果就是該元素原本占據的空間被其它元素所填充。

4，mix relative and absolute(混合相對定位和絕對定位)

如果對一個父元素設置relative，而對它的一個子元素設置absolute

打開HTML文本編輯軟件，新建一個HTML文件，并在HTML文件中添加HTML的基本標簽元素。基本元素添加完畢后在body標簽中添加一個div元素，并在div元素中添加一個表格table元素。

接下來再div元素和表格table元里設置屬性。其中核心代碼是：padding-left：20px；表示表格距離左邊20個px單位。保存后運行結果。

1、首先，創建一個新的html文件并編寫一個input標簽。

2、其次，將after偽元素添加到input標簽前面的span標簽，然后將偽元素的背景設置為要添加的圖片。

3、最后，將相對位置添加到父元素，為了使偽元素能相對父級div定位。 通過調整after偽元素的left值和top值，可以將圖片放入input框。這樣，就實現了把一張圖片弄到輸入框里面了。