相对定位的问题

Question

HTML代码：

CSS代码：

浏览器显示：

当给div设置margin-top:-80px时：

此时下面的绿色覆盖住了上面的红色

问题：当个div再加上 position： relative；

上面的红色覆盖住了下面的绿色，

这是发生了什么？和相对定位的什么特性有关系啊？

Answer 1

深入理解CSS中的margin负值
浅析CSS——元素重叠及position定位的z-index顺序

Answer 2

绝对定位，浮动都会脱离文档流

Answer 3

1.在同一个块级上下文中，在垂直方向上，margin会合并，没有设置div的margin-top的时候，p默认是1em的margin，所以0和1em合并后是1em的间距，所以中间有空白；当设置div的margin-top为-80px的时候，合并后的间距是1em-80px，一般情况下是负值，所有p元素会覆盖div元素；
2.当没有设置div的position为relative的时候，默认的绘制顺序是按文档流的顺序，所以下面的p会覆盖上面的div元素；当设置div的position为relative的时候，会改变绘制顺序（详见z-index规范），如下图：

p元素是第3项，div元素是第6项，所以div会在p后面绘制，所以此时是div覆盖p元素。