CSS定位（Positioning）屬性允許你對(duì)元素進(jìn)行定位芜茵。
CSS有三種基本的定位機(jī)制：普通流蜻懦，浮動(dòng)和絕對(duì)定位。
通過使用 position 屬性夕晓，我們可以選擇 4 種不同類型的定位，這會(huì)影響元素框生成的方式悠咱。
position 屬性值的含義：
static：元素框正常生成蒸辆。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分析既，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框躬贡，置于其父元素中。
relative：元素框偏移某個(gè)距離眼坏。元素仍保持其未定位前的形狀拂玻，它原本所占的空間仍保留。
absolute：元素框從文檔流完全刪除，并相對(duì)于其包含塊定位檐蚜。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊魄懂。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來不存在一樣闯第。元素定位后生成一個(gè)塊級(jí)框市栗，而不論原來它在正常流中生成何種類型的框。
fixed：元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute咳短，不過其包含塊是視窗本身填帽。
** 提示：相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置**咙好。
相對(duì)定位
設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)距離篡腌。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留勾效。
.box_relative {
position: relative;
left: 30px; //
top: 20px;
}
如果將 top 設(shè)置為 20px嘹悼，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素葵第，那么會(huì)在元素左邊創(chuàng)建 30 像素的空間绘迁，也就是將元素向右移動(dòng)。
絕對(duì)定位
設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除卒密，并相對(duì)于其包含塊定位缀台，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉哮奇，就好像該元素原來不存在一樣膛腐。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框鼎俘。
W3C-CSS絕對(duì)定位
浮動(dòng)
浮動(dòng)的框可以向左或向右移動(dòng)哲身，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/strong>
由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣贸伐。
W3C-CSS 浮動(dòng)
