5.2.1 相对定位

在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。

要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。

相对定位

当一个元素的 position属性设置为 relative，它将使用相对定位。相对定位的元素在普通流中进行定位，它将出现在文档流中原本的位置。然而，可以通过设置水平或垂直偏移量，使它相对于原本的位置，偏移指定的距离，移动到新的位置。如果没有设置偏移，或设置的偏移量为 0，那么它仍将保持在原来的位置。

相对定位的元素，通过 left、right 属性来定义水平偏移量，top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离，right 表示相对于原本位置的右外边界左移的距离，top 表示相对于原本位置的上外边界下移的距离，bottom 表示相对于原本位置的下外边界上移的距离。并且，偏移量可以是正值，也可以是负值，负值表示向相反的方向移动。

left、right、top、bottom 这 4 个属性的值，可以是长度值（可以是绝对单位或相对单位），也可以是百分比。使用百分比时，水平偏移量根据其父元素 width 属性的值计算得到，垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是，在设置偏移时，如果父元素没有显式定义 height 属性，就等同于 height 属性的值为 0。

接下来通过一个实例，来理解相对定位的原理和效果。假设页面上有一个容器 wraper，其中包含三个子元素：

<div id = "wraper">
   <div></div>
   <div></div>
   <div></div>
</div>

假设这些子元素都水平排列，并具有 10px 的外边距。为了方便查看，为容器和子元素分别添加了边框。CSS代码如下：

#wraper  {
   width: 366px;
   overflow: hidden;   /* 防止父元素高度塌陷 */
   box-sizing: border-box;
   border: 2px dashed #ccc;
}
#wraper > div {
   float: left;   /* 让元素水平排列 */
   margin: 10px;
   width: 100px;
   height: 80px;
   border: 1px solid #ccc;
   box-sizing: border-box;
}

未使用相对定位前，三个子元素依次水平排列，并各自占据自身在文档流中原本的位置，运行结果如图 5‑16 所示：

从上图可以看出，第二个元素的左右两侧均有 20px 的水平外边距。现在对第二个元素使用相对定位，把它的 top 属性设置为 20px， left 属性设置为 30px：

#wraper div:nth-child(2) {
   top: 20px;
   left: 30px;
   position: relative;
}

从前面的介绍可知，如果将 top 设置为 20px，框就会相对于原本位置的上边界下移20px。如果left 设置为 30px，那么框就会相对于原本位置的左边界右移30px。运行效果如图 5‑17 所示：

上图中，虚线框表示第二个元素原本的位置（当然，这个虚线框是人为加上去的），它相对原本位置右移 30px，下移 20px。可以看出，右移 30px 后，它已经覆盖到第三个元素。并且，在下移 20px后，它已经移到父元素的外面，即便如此，父元素的尺寸依然不变，也不会因此而被撑大。

由此可知，相对定位的元素，无论设置偏移，它仍然占据文档中的原有位置。设置偏移之后，只是在视觉上相对于原有的位置移动了而已，并且对父元素和兄弟元素的布局都没有任何影响，但可能会覆盖其他元素。