CSS定位（position属性）以及top和magin-top的区别

CSS 定位 (Positioning) 属性允许我们对元素进行定位。
CSS 定位和浮动：CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS position 属性可以选择 4 种不同类型的定位：

static：默认定位，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中——这种定位是默认的，一般没什么实际的作用。
relative：相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置。
absolute：绝对定位，这种定位脱离文档流，可以理解为跟其他的元素不再一个次元中，可以用top/right/bottom/left来控制位置，absolute是相对于最近祖先非static定位来定位的，如果说他的父级定位是默认的，那么它就会继续向上找父级的父级，直到找到非static定位为基准点。
fixed：固定定位，这种定位是相对与浏览器的窗口来定位，我们经常会看到网页中右下角有个回顶部的标记，无论鼠标滑轮怎么滑动他都不会改变他的位置。

下面以具体代码效果为例进一步说明：

   

     

   

页面结果如下：

上面的代码中，div1是相对定位，div2是默认定位，div3是绝对定位，而且div2是div3的父级，div2是div3的父级；图中绿色为div1，咖啡色为div2，橘色为div3。由于div3的父级是div2，它是static定位（默认定位），所以div3会继续向上找父级的父级—div1，而div1是relative定位（相对定位），所以div3是以div1的位置为基准点定位的。

如果设置div的position属性为relative，则div3会直接以div2的位置为基准点定位，如下图所示：

从上图可以看出来，div3到了div2的左上角，可见其定位基准变成了div2。

在relative定位下top和margin-top的区别：一个div中设置了margin-top:50px; 那么中间这个50px属于盒子模型中的一部分；而设置了top：50px，则50px不属于盒子模型的一部分。

综上所述，top/right/bottom/left一般在absolutel定位中使用，在relative下也可以使用，但是在默认定位下是不起作用的。

参考博客：http://blog.csdn.net/lxiang222/article/details/70340084