相對定位與絕對定位

2021-09-03 02:15:11 字數 583 閱讀 9578

什麼是文件流?

將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流。

只有三種情況會使得元素脫離文件流,分別是:浮動絕對定位和相對定位。

對position的四個屬性值relative,absolute,static,fixed分的不是很清楚.

trbl(top、right、bottom、left)

寫前端網頁經常涉及到的兩個位置,就是相對位置和絕對位置。具體表現在**裡面則是:

position: relative;

position: absolute;

下面分別解釋相對位置與絕對位置

1.相對位置:

top的值表示物件相對原位置向下偏移的距離,bottom的值表示物件相對原位置向上偏移的距離,兩者同時存在時,只有top起作用。

left的值表示物件相對原位置向右偏移的距離,right的值表示物件相對原位置向左偏移的距離,兩者同時存在時,只有left起作用。

絕對定位與相對定位

先看以下 效果 當設定child的div改為絕對定位後 效果 當父div沒設定絕對定位時,子絕對定位是相對於瀏覽器左上角座標,當時當父div設定了絕對或者相對定位後,效果如下 absolute 絕對定位 和 relative 相對定位 position absolute 意思是 絕對定位,他預設參照...

相對定位與絕對定位

其實是非常簡單的概念,w3school 給出的兩幅圖可以一目了然地表達這兩個概念 相對定位 position relative 也就是說,相對定位是相對於元素原來的位置進行重新定位,定位後,任然佔據著在文件流中原始的位置。絕對定位 position absolute 也就是說,絕對定位是相對於已定位...

相對定位與絕對定位

relative是相對定位,相對於本身的位置,元素的位置通過 left top right bottom 屬性進行定位。left是離原座標x軸的距離,top是離原座標y軸的距離,它本身的位置還在。absolute是絕對定位,相對於視窗左上角的位置,元素的位置通過 left top right 以,b...