relative定位的理解

2022-10-10 09:03:12 字數 342 閱讀 8204

relative:物件不可層疊,但將依據left,right,top,bottom等屬性在正常文件流中偏移位置。

設定此屬性值為 relative 會保持物件在正常的html流中,但是它的位置可以根據它的前乙個物件進行偏移。在相對(relative)定位物件之後的文字或物件占有他們自己的空間而不會覆蓋被定位物件的自然空間。

試驗:當前面有文字時,relative的div的高度產生偏移。

當沒有文字時,第乙個物件完全正確,第二個物件則沒有任何規律。它的top既不是從父物件起算,也不是從前面的物件起算。似乎是:第乙個物件的top+第乙個和第二個之間的空隙。

經過驗證,三個物件,調整中間物件的寬度,結論的確如此。

相對定位relative

今天看了慕課網課程css深入理解之relative,進行總結 使用relative定位的元素使其absolute子元素,相對於此relative元素定位 使用relative定位的元素的z index層級越高,則其absolute子元素層級越高 z3的層級要比z1小,因為z1的父元素層級大 over...

absoluted定位和relative定位

首先div設定absoluted絕對定位後,div會脫離文件流,因此不佔據空間。與div設定為relative相對定位不同,相對定位實際上被看作普通流定位模型的一部分。絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。根據使用者 的不同,最...

CSS深入理解之relative

總結 1 position absolute 他的意思是絕對定位,預設上溯父級元素,找第乙個不是 static 的元素,以其為 absolute 的基準。如果設定trbl並且父級沒有設定position屬性,那麼當前的absolute則以瀏覽器左上角為原始點進行定位,位置將由trbl決定。2 pos...