CSS 中的position 屬性用來設定元素在頁面中的位置，透過該屬性您可以把任何屬性放在任何您認為合適的位置。
position屬性規定元素的定位類型。這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會產生一個區塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的預設位置偏移。
position 屬性規定應用於元素的定位方法的類型（static、relative、fixed、absolute 或sticky）：
元素其實是使用top、bottom、left 和right 屬性定位的。但是，除非先設定了position 屬性，否則這些屬性將不起作用。根據不同的position 值，它們的運作方式也不同。
1. 靜態定位：static
HTML 元素預設的定位方式為static（靜態）。
靜態定位的元素不受top、bottom、left 和right 屬性的影響。
position: static; 的元素不會以任何特殊方式定位；它總是會根據頁面的正常流進行定位：
舉例：
<!DOCTYPEhtml><html><head><style>div{height:100px;border:1pxsolidblack;}div.static{width:130px;height:50px;background-color:#CCC;line-hei ght:50px;text-align:center;position:static;top:50px;left:20px;}</style></head><body><div><divclass=static>item;</div></ div></body></html>運行結果：
2. 相對定位：relative
舉例：
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;bac kground-color:red;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div></body ></html>運行結果：
若更改程式碼中CSS樣式檔案如下：
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red; position:relative;left:20px;top:20px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div>< /div></body></html>運行結果：
總結：relative是相對正常文件流的位置進行偏移，原先佔據的位置依然存在，也就是說它不會影響後面元素的位置。 left表示相對原先位置右邊進行偏移，top表示相對原先位置下邊進行偏移。當left和right同時存在，僅left有效，當top和bottom同時存在僅top有效。 relative的偏移是基於物件的margin左上側的。
3. 絕對定位：absolute
舉例：
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}# co ntent{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div ></div></body></html>運行結果：
當修改css樣式檔時：
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position: absolute;left: 20px;top:20px;}#content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1</div>< divid=item2>item2</div></div></body></html>運行結果：
由此可見當父級元素的position屬性值為預設值時（static）,absolute是相對於瀏覽器視窗進行定位的。
如果設定content的position屬性值為非預設值，那麼absolute就是相對於該父級元素進行定位：
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position: absolute;left:20px;top :20px;}#content{margin-left:100px;margin-top:100px;position:relative}</style></head><body><divid=content><divid=item1>item1</div>< divid=item2>item2</div></div></body></html>運行結果：
繼續修改css樣式：
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}# content{margin-left:100px;mar gin-top:100px;position:absolute;padding:20px;border:10pxsolidblack;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2> item2</div></div></body></html>運行結果：
注意到變化了嗎，當把外層div設定為absolute時，外層div寬度由原來的100%變為auto.
當把一個元素position屬性設為absolute或fixed的時候，會發生三件事：
（1）把這個元素往Z 軸方向移了一層，元素脫離了普通流，所以不再佔據原來那層的空間，還會覆蓋下層的元素。
（2）該元素將變成區塊級元素，相當於給該元素設定了display: block;（給一個內聯元素，如<span> ，設定absolute 之後發現它可以設定寬高了）。
（3）如果該元素是塊級元素，元素的寬度由原來的width: 100%（佔據一行），變成了auto。
4. 固定定位：fixed
固定定位就是將元素相對於瀏覽器視窗進行定位，使用固定定位的元素不會因為瀏覽器視窗的滾動而移動，就像是固定在了頁面上一樣，我們經常在網頁上看到的返回頂部按鈕就是使用固定定位實現的。
舉例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;wi dth:500px;}.in{border:blue1pxsolid;height:200px;width:200px;}</style></head><body><divclass=outstyle=posit ion:relative;><divclass=instyle=background-color:wheat;></div><divclass=instyle=background-color:red;position:fixed;left:20px;bottom:10px;></div>< divclass=instyle=background-color:blue;></div></div></body></html>運行結果：
5. 黏性定位：sticky
黏性定位與前面介紹的四種定位方式不太一下，它像是相對定位和固定定位的結合體，當滾動頁面時它的效果與相對定位相同，當元素滾動到一定程度時它又會呈現出固定定位的效果。例如一些網頁上的導覽選單，當頁面載入完成時它在自己預設的位置，當我們向下捲動頁面時它又會固定在頁面的最頂端。
舉例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; height:200px;width:250px;}</style></head ><body><divclass=out><divclass=instyle=background-color:wheat;></div><divclass=instyle=background-color:red;></div><divclass=instyle=background-color: blue;></div></div></body></html>運行結果：
