absolute與relative的愛恨情仇

2021-09-06 22:02:50 字數 1309 閱讀 6086

absolute

第一種情況:

**:

1,相對於乙個已定位的包含它的元素

父類 子類

菜鳥教程解釋:位置設定為 absolute 的元素,可定位於相對於第乙個已定位(非靜態的)的包含它的元素的指定座標。此元素的位置可通過 "left"、"top"、"right" 以及 "bottom" 屬性來規定。

截圖:

由結果可知,當父類為乙個(已經定位)的元素時:子類(absolute)則以父類的左上角的原始基點進行定位(left,right,top,bottom,margin,padding);

第二種情況:

**:

2,相對於乙個未定位的包含它的元素,且子類沒有top,left,right,bottom(不包括marginpadding)

父類子類

截圖

結果可知:預設基於父類左上角,且只能由margin以及padding調整位置

第三種:

**:

2,相對於乙個未定位的包含它的元素,且子類存在top,left,right,bottom(不包括marginpadding)其中一項

父類 子類

截圖:

結果可知:如果子類定位為absolute,且存在trbl其中一項,則以第乙個的已定位的父類的左上角為基準,如沒有,則以瀏覽器左上角為基準。

relative(相對的單純,哈哈哈)

**:

2,相對於乙個其正常位置通過top,left,right,bottom,margin,padding進行定位

父類 子類

菜鳥解釋:生成相對定位的元素,相對於其正常位置進行定位。

因此,"left:20" 會向元素的 left 位置新增 20 畫素。

截圖:

結果可知:relative定位相對簡單,(但是如果一元素沒有父類,且定位為relative則就要考濾,其在html中的層次關係處於那一層次了)(重要)。

absolute 與 relative 的運用

div css 進行網頁布局,適當地運用 absolute 與 relative,能給布局帶來意想不到的效果和方便,達到事半功倍,最近在有一篇關於 absolute 與 relative 的運用的文章,但講解不全面,不容易讀懂。下面我嘗試寫下一些我的看法,希望對你有幫助 詳細講解兩者的關係,需要配合...

Relative與Absolute組合使用

小夥伴們學習了絕對定位的方法 使用position absolute可以實現被設定元素相對於瀏覽器 body 設定定位以後,1 參照定位的元素必須是相對定位元素的前輩元素 div id box1 div id box2 相對參照元素進行定位 div div 從上面 可以看出box1是box2的父元素...

絕對定位(absolute

絕對定位 absolute 作用是將被賦予此定位方法的物件從文件流中拖出,使用left,right,top,bottom等屬性相對於其最接近的乙個最有定位設定的父級物件進行絕對定位,如果物件的父級沒有設定定位屬性,即還是遵循html定位規則的,則依據 body 物件左上角作為參考進行定位。絕對定位物...