CSS 元素的定位之相对定位 position: relative

在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，其中包含三个子元素：

1. <div id = "wraper">
2.    <div></div>
3.    <div></div>
4.    <div></div>
5. </div>

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

1. #wraper  {
2.    width: 366px;
3.    overflow: hidden;   /* 防止父元素高度塌陷 */
4.    box-sizing: border-box;
5.    border: 2px dashed #ccc;
6. }
7. #wraper > div {
8.    float: left;   /* 让元素水平排列 */
9.    margin: 10px;
10.    width: 100px;
11.    height: 80px;
12.    border: 1px solid #ccc;
13.    box-sizing: border-box;
14. }

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

图5-16 元素未定位

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

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

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

图5-17 相对定位元素

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

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

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。