什么是绝对、相对定位

绝对定位

position：absolute

设置为绝对定位的元素框将会从文档流中完全删除，并相对于其包含块（父元素）定位，包含块可能是文档中的另一个元素或者是初始包含块（body）元素。

绝对定位会脱离文档流，并且不占空间，普通文档流的元素的布局会认为绝对定位的元素不存在，所以绝对定位的元素可以覆盖在其他元素上，可以通过 z-index 来控制这些层的相应顺序。

<html><head><style type="text/css">/* 由于 div1 没有已定位的祖先元素，所以此处以 body 为准 */.div1{width: 100px;height: 100px;background: blue;position: absolute;left: 50px;}/* 以父类的位置为标准，也就是 div1 */.div2{width: 50px;height: 50px;background: gray;position: absolute;left: 50px;top: 80px;}</style></head><body><div class="div1">div1<div class="div2">div2</div></div></body>

效果图：

效果图中，div2 的父元素是 div1 ，以 div1 为基准。div2 距离 div1 的 top 80px，left 50px 。

绝对定位不会占用原来的空间，以下面的代码生产的效果图示例：

<html><head><style type="text/css">.div1{width: 100px;height: 100px;background: blue;position: relative;}.div2{width: 50px;height: 50px;background: gray;position: absolute;left: 20px;}#span1{width: 100px;height: 30px;background: green;display: inline-block;}</style></head><body><div class="div1"><div class="div2"></div><span id="span1">1</span></div></body>
</html>

效果图：

图中，灰色 div2 的框覆盖住了绿色的 span1 ，不在占用原来的空间

相对定位

position:relative

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

相对位置的坐标参考系是以自己上一次的位置作为原点参考，其实也就是相对于自己的位置。

<html><head><meta charset="utf-8"><style type="text/css">.div1{width: 100px;height: 100px;background: blue;left: 50px;}/* 自己的原本位置为标准，也就是左上角 */.div2{width: 50px;height: 50px;background: gray;position: relative;left: 100px;}</style></head><body><div class="div1"><div class="div2"></div></div></body>
</html>

效果图：

相对定位是以它最初的位置为准，因为 div1（蓝色）是父类，所以它最初位置在 div1 内，然后它距离左边 100px。

相对定位的元素，将会占用原来的空间，示例代码：

<html><head><meta charset="utf-8"><title></title><style type="text/css">.div1{width: 100px;height: 100px;background: blue;position: relative;}.div2{width: 50px;height: 50px;background: gray;position: relative;left: 20px;}#span1{width: 100px;height: 30px;background: green;display: inline-block;}</style></head><body><div class="div1"><div class="div2"> </div><span id="span1">1</span></div></body>
</html>

效果图：

如图说是，灰色的 div2 依旧占用着空间，所以 span1 只能放在下面
注意：

如果有文字的情况下，如果在有文字的范围内，那么长度或者高度要包括文字的长度和高度。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
还有，当 position:absolute 会改变 display 类型，也就是 inline-block 方式进行显示。

其他

static（默认值）
- 该元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- 表示没有定位
fixed
- 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
- 固定定位的元素不会随浏览器窗口的滚动条滚动而变化，也不会受文档流动影响，而是始终位于浏览器窗口内视图的某个位置。

总结

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块（body）。