position 的四个值：static、relative、absolute、fixed。

绝对定位：absolute 和 fixed 统称为绝对定位
相对定位：relative
默认值：static

relative相对定位

相对定位是一个非常容易掌握的概念。
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

如下图所示：

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

absolute绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。
这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样。

#box_absolute {
  position: relative;
  left: 30px;
  top: 20px;
}

如下图所示：

需要注意的是:

• 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
• 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index属性来控制这些框的堆放次序。

子绝父相布局

子绝父相是大部分情况下的布局方式，但不是唯一的布局方式，子绝父绝也可以，视情况而定。
示例：

1. 广告横幅右上角“关闭按钮”是“浮”在广告横幅上面，不能占据标准流当中的位置，所以关闭按钮图标只能用绝对定位。
2. 关闭按钮图标的绝对定位的一定是相对它最近已定位的祖先元素（也就是横幅）定位的。

子绝已经是确定了的，这时最近的祖先元素（父）有两种情况：

• 如果使用了“子绝父相”：也就是横幅（最近的祖先元素）是相对定位，这时横幅是在整个标准流当中占据位置的，下面的内容不会被顶上来。关闭图标是绝对定位，正好是相对父元素横幅进行的定位。

• 如果使用了“子绝父绝”：虽然“关闭图标”是放在了横幅的正确位置上，但是这个时候横幅也是绝对定位，也会“浮”起来，这时候下面标准流的内容就会顶上来，被横幅遮盖住。

总结：把脱离文档流的元素放在不脱离文档流（需要占位置）的元素上就要用“子绝父相”布局。