static
元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。
默認(rèn)就是static。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。 absolute
元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。
說了這么多專業(yè)的，有些小伙伴就看不下去了吧，下面我們就上圖給你理解。
這就是代碼對應(yīng)的左邊的圖?，F(xiàn)在我們逐個加上定位看看效果。
相對定位和絕對定位 position:relative position:absulute
黑圓相對于橙色的矩形絕對定位了，脫開了一切約束，根據(jù)relative相對定位的元素進行移動，就是left、top控制的，相對的，還有right、bottom也可以控制的。
在看看固定定位 position:fixed
fixed和相對定位relative沒什么絕對的關(guān)系，是根據(jù)瀏覽器窗口來決定位置的，這里我們給了小黑q球一個top:200px，雖然她的標(biāo)簽在oDIv中，但是并不會受oDiv位置的影響，這就是fixed，一般多用于網(wǎng)站的某一模塊固定在哪一部分采用的。
|
