margin-top和top的区别

top要配合position:relative和position:absolute使用。

http://stackoverflow.com/questions/4036176/css-top-vs-margin-top
You'd use margin, if you wanted to move a (block) element away from other elements in the document flow. That means it'd push the following elements away / further down.

If you wanted the element to have no effect on the surrounding elements, you'd use positioning (abs., rel.) and the top, bottom, left, right settings.

上述说如果我们想移动一个元素， 但是却不影响其它元素的位置， 那我们就可以使用
position:relative|absolute + top:xx
如下图所示：



原本div1是在div2的上面。
当加入了position和top之后， div1被移动到了下面， 而div2没有收到影响。

当我们使用margin时， 就会导致其它的元素被下移，或者移开。

如下图所示：


这里div2随着div1一起被移动到了下面。