top和margin-top等的区别

转载自：点击打开链接

这一次因为是拿着别人的源码改成自己要的效果，我发现原来我之前一直都只会用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进行绝对定位。