## position（**定位**，偏移到想要的地方）
**定位例子鏈接**：http://zh.learnlayout.com/position.html
>[success]### 一、position:static（默認值）
* 在不設置position的情況下，默認是static。
* 該元素出現在文檔的常規位置，不會重新定位。（占位置）
* 設置 top、bottom、left、rigth、z-index是沒有效果,以下介紹的定位方式才有效果。
<span style="background:#50af51;position:static;left:100px;top:100px;color:#fff">
position:static;
left:100px;<span style="color:red;">(無效)</span>
top:100px;<span style="color:red;">(無效)</span>
</span>
>[warning]### 二、position:fixed（相對瀏覽器窗口定位）
* 脫離了文檔流，不會影響其它元素的布局。（不占位置）
* 設置 top、bottom、left、rigth是相對瀏覽器的邊緣進行偏移。
<div style="background:#f0ad4e;position:fixed;right:0;top:100px;color:#fff">
position:fixed;<br>
right:0;<br>
top:100px;
</div>
>[danger]### 三、position: relative;（相對定位）
* 在不設置top、bottom、left、rigth的情況下與position:static效果一樣。
* 設置top、bottom、left、rigth之后就是相對元素原先位置進行偏移。
* 設置偏移之后不會影響其它元素的布局，但原有所占位置被保留。（占位置）
<div style="background:#d9534f;position:relative;left:100px;top:20px;color:#fff;width:160px;">
position: relative;<br>
left:100px;<br>
top:20px;<br>
</div>
>[info]### 四、position: absolute;（絕對定位）
* 與position:fixed差不多，但不是相對于瀏覽器邊框進行偏移，而是相對于外層**最近**的**非static**(即：fixed、relative、absolute)進行偏移的。
* 如果外層沒有**非static**的元素，則默認相對body進行偏移。
<div style="background:#ccc;height:150px;position:relative;color:#fff;">
position:relative;
<span style="color:red;">(或position:absolute;或position:fixed;)</span>
<span style="background:#5bc0de;position:absolute;top:60px;left:100px;color:#fff;">position: absolute;<br>
top:60px;<br>
left:100px;<br>
</span>
</div>
