關於相對定位與絕對定位

2022-03-18 15:02:18 字數 802 閱讀 2500

1.相對定位:相對自身正常位置的偏移;

position:relative;

1) top:10px;            

left:10px;

2) bottom:10px;

right:10px;

兩種情況如下所示(綠色塊狀為初始正常位置,橙色指的是給它相對定義後的位置):

2.絕對定位:指相對于父元素的四個方向(top,left,right,bottom)的位置。飄在父元素之上,不佔父元素的位置。

position:absolute; 

1) top:10px;            

left:10px;

2) bottom:10px;

right:10px;

注:這裡指的父元素必須是指定了position屬性的父元素,若其直屬父元素沒有定義,則往上一直找上層父元素,……直到找到position屬性的父元素,這時候的距離就相對於該父元素,如果父元素及其所有上層父元素都沒有定義position屬性,那麼定義的距離就是相對於body的距離。

若有兩個子元素同時飄在父元素上面,且距離較近有重疊時,寫在後面的子元素在上方,若要改變其上下位置,可使用 z-index 屬性;

z-index:1000;

z-index:1001;

值較大的在上面;

絕對定位與相對定位

先看以下 效果 當設定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...