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