CSS——relative

relative会对absolute有诸多限制：

1、定位

absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下：

　　1. 没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点。

　　2. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：

　　(1). 父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定。

　　(2). 父级有 position 属性，父级的“坐标原始点”为原始点。

　　relative：相对定位，CSS 写法“ position: relative; ”，它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

2、层叠

relative的优先级最高，会覆盖absolute的z-index

3、overflow

absolute不受overflow的限制，但一旦加入了relative，就要受到限制

补充：margin-top与top的区别

margin-top会影响之后的元素跟着发生位置的变化，而top只影响自身，其他的元素位置还是相对于其变化之前的位置