1. 简介

一旦一个盒子遵循常规流或者浮动摆放好后，它有可能根据这个位置来相对位移，这被称作相对定位。通过这种方式移动盒（ B1 ）对随后的盒（ B2 ）没有影响： B2 被赋予了一个如同 B1 没有位移的位置，并且 B2 在 B1 移动后不会重定位。这意味着相对定位可能造成盒重叠。然而，如果相对定位造成一个 overflow:auto 或 overflow:scroll 的盒溢出，客户端必须通过创建滚动条来让用户可以访问到该内容（在其偏移位置），这可能影响布局。

一个相对定位盒保持其常规流中的大小，包括断行和原本为其保留的空间。

2. left 和 right

对于相对定位元素而言， left 和 right 在不改变盒大小的同时使其水平位移。 left 使盒向右移动， right 使其向左移动。 left 或 right 没有造成盒的分割或拉伸，因此使用值始终满足： left = - right 。

left和right取值有如下情况：

1. 如果 left 和 right 的值均为 auto （默认值initial value），则使用值为 0 （即是说，盒保持在其原位）。

2. 如果 left 是 auto ，其使用值为 right 的负值（即盒向左移动 right 值）。

3. 如果 right 是 auto ，其使用值为 left 的负值。

4. 如果 left 和 right 均不为 auto ，定位则被过度约束，其中一值必须被忽略。如果包含块的 direction 属性值为 ltr ，则 left 值胜出而将 right 值修改为 - left 。如果包含块的 direction 属性值为 rtl ， 则 right 值胜出而将 left 值忽略。

如下所示，三条规则是等效的：

div.a8 {
   position: relative;
   direction: ltr;
   left: -1em;
   right: auto
}
div.a8 {
   position: relative;
   direction: ltr;
   left: auto;
   right: 1em
}
div.a8 {
   position: relative;
   direction: ltr;
   left: -1em;
   right: 5em
}

3. top和bottom

top 和 bottom 属性在不改变相对定位元素的大小的同时使其上下位移。 top 使其下移， bottom 则使其上移。 top 或 bottom 没有造成盒的分割或拉伸，因此使用值始终满足： top = - bottom 。如果二者均为 auto ，其值则均为 0 。如果其中一个值为 auto ，则该属性取另一属性的负值。如果二者均不为 auto ， bottom 将被忽略（也就是说， bottom 使用为 top 的负值）。

参考