Position和float這兩個元素屬性非常重要；今天主要來看一看position在定中的作用。

首先Position有四個屬性值，分別是static 、fixed、 relative 、absolute。

第一個屬性值是static，這是position的預設屬性，一般我們都不會用到他，所以也很少提到他，但是在特殊的情況下，他又有著不可替代的作用，比如，在媒體查詢頁面當中，正常頁面當中需要給元素加position屬性，但是在響應式頁面中不需要，這是就只能用position：static；沒有position：none；的寫法，網頁也不會識別。

第二個屬性fixed——固定定位，fixed是相對於window視窗的定位，一般在網頁中也會經常看到，例如置頂，等

<div class="box1"></div>
<div class="pink">置頂</div>

<style>
 .box1{
 height: 2000px;
 width:10px;
 }
.pink{
height: 100px;
width: 100px;
background:pink;
position: fixed;
bottom: 20px;
right: 100px;
}
</style>

如圖中所示，無論滾動條怎麼滑動上圖的滾動條，div-pink都不會改變自己在視窗的位置；

第三個屬性值relative——相對定位；相對於自己本身的定位；這個定位一般是和absolute屬性值一起用；相對定位不會破壞元素的文字流，但是會改變元素的視覺效果

第四個屬性值absolute——絕對定位；相對於父級元素的定位，如果沒有父級元素時相對於視窗的定位；

需要注意的是static relative這兩個屬性值是不會破壞元素的文字屬性；但是fixed 和 abosulte則會改變元素的文字流，有float的效果。