css有三種定位機制
- 標準流
- 浮動
- 絕對定位
只要不指定，所有標簽均在標準流中定位梆造。塊級標簽由于獨占一行片酝，所以從上到下排列，而行內(nèi)和行內(nèi)塊級則水平排列眷射。
css position
一切標簽皆是框
通過position屬性匙赞，我們可以選擇四種不同類型的定位
- static:按標準流定位（村里分地，按照規(guī)則正常分）
- relative:框偏移某個距離妖碉，原本在正常文檔流中所占空間仍保留（我分來的地我不種涌庭，但還是我的，你分的還是按規(guī)則分來的地）
- absolute:框從正常文檔流中刪除（我退出分地欧宜，接下來的人可以分這塊地）坐榆，相對于其包含塊定位（從父塊一直向上找，找到一個不是static的包含塊冗茸，相對于其定位）
- fixed:類似于absolute席镀，不過包含塊直接設(shè)置為窗口匹中。
talk is less show code!
static就不寫了
relative
<style>
.left{
position: relative;
left: -20px;
}
.right{
position: relative;
left: 20px;
background-color: blue;
}
.up{
position: relative;
top: -20px;
background-color: yellow;
}
.down{
position: relative;
background-color: red;
}
</style>
<p>原始</p>
<p class="left">原始</p>
<p class="right">原始</p>
<p class="up">原始</p>
<p class="down">原始</p>
屏幕快照 2016-03-27 下午8.08.48.png
我們注意到，黃色的div由于設(shè)置了top: -20px豪诲，向上偏移了顶捷。但是關(guān)鍵的問題來了，接下的紅色div仍是按照黃色div原先在文檔流中的位置向下定位的屎篱，我們將top: -20px;的代碼注釋掉服赎，結(jié)果如下
屏幕快照 2016-03-27 下午8.08.18.png
這就是relative中原本在正常文檔流中所占空間仍保留的意思。
