## 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>
