其实是非常简单的概念,w3school 给出的两幅图可以一目了然地表达这两个概念:
相对定位 position:relative;
也就是说,相对定位是相对于元素原来的位置进行重新定位,定位后,任然占据着在文档流中原始的位置。
绝对定位 position:absolute;
也就是说,绝对定位是相对于已定位的祖先元素进行重新定位,如果该元素不存在已定位的祖先元素,就相对于最初包含块(body)进行定位。
要注意的是,采用绝对定位的元素脱离了文档流,其实应该说它本来就不再文档流中。因此图中的框3是直接在框1后面的。