绝对定位与相对定位的比较

一：绝对定位

position: absolute; 绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即设置了绝对定位或者相对定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的堆叠顺序。

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，那这个元素到哪去了呢？它浮了起来，其实设置了相对定位时也会让该元素浮起来，但它们的不同点在于，相对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，完全从文档流中抽了出来，我们可以通过z-index来设置它们的堆叠顺序 。

#box_relative {

      position: absolute;

      left: 30px;

      top: 20px;

}

绝对定位示意图

---

二：相对定位

position: relative;相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置），然后通过设置垂直或水平偏移，让这个元素“相对于”它的原始起点进行移动；

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。移动元素会导致它覆盖其它框。

对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意， 在使用相对定位时，就算元素被偏移了，它仍然占据着它没偏移前的空间。这里值得注意的一点是：偏移可不是边距，跟边距是不一样的。

#box_relative {

      position: relative;

      left: 30px;

      top: 20px;

}

相对定位示意图

---

注意：

position: absolute、float会隐式地改变display的类型（display：none除外）。即当元素设置position: absolute、float: left、float: right中任意一个时，都会让元素以display: inline-block的方式显示（特点是：可以设置宽高，默认宽度不占满父元素）。这时，即使故意设置display: inline、display: block都是无效的。

position: relative不会隐式改变display的类型。