absolute與relative的愛恨情仇

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中的層次關係處於那一層次了）（重要）。