top和margin-top等的區別
阿新 • • 發佈：2019-01-11
這一次因為是拿著別人的原始碼改成自己要的效果，我發現原來我之前一直都只會用margin-top、margin-bottom等是多傻的舉動！因為在某些時候top、bottom、left、right比margin-top、margin-bottom、margin=left、margin-right好用很多。。。
當時我覺得很納悶，難道top系列和margin-top系列不是一個意思嗎？-_-|||後來問了度娘我就知道我又錯的離譜（原來我的知識淺薄T^T）
那麼下面我就記錄一下這次的發現。
簡單說一些top、margin-top的區別：
1、top、bottom、left、right是絕對定位，必須設定position為absolute。
margin一系列設定是相對定位
注意：如果用top等，而position未設定為absolute，那設定是不起作用的。
2、top這些在絕對定位的前提下，這個絕對定位，是相對body 或者 position：relative的父級元素的絕對定位。
margin的相對定位，是指相對相鄰元素的定位。
例如：top這些在絕對定位的前提下，這個絕對定位，相對position：relative的父級元素的絕對定位。
最外邊藍色背景div設定position：relative。那內部的文字等div就可以相對外邊div進行絕對定位。