相对定位

（postion:relative)

当一个盒根据<u>常规流</u>或者<u>浮动</u>摆放好后，它可能会相对于该位置移动，称之为相对定位。

对其他盒的影响：用这种方式偏移盒(B1)的位置不影响盒(B2)，遵循：给定B2位置时就当B1没有偏移，并且B2在B1应用偏移之后没有重新定位（re-positioned）。这表明相对定位可能会导致盒重叠。（z-index确定重叠的显示）

对包含块的影响：然而，如果相对定位导致具有'overflow:auto'或'overflow:scroll'的盒溢出了的话，UA必须让用户能够访问这部分内容（在其偏移位置），此时，滚动条的创建可能会影响布局。

内部影响：相对定位的盒保持它在常规流中的大小，包括换行和空格都会原样保留。

具体设置

对于相对定位的元素，'left'和'right'水平移动盒，不会改变其大小。'left'把盒向右移，而'right'把盒向左移动。因为盒没有被分割或者拉伸，所以'left'或'right'的应用值总是（满足）：left = -right

如果'left'和'right'都是'auto'（各自的初始值），应用值为'0'（即盒待在原位置）

如果'left'是'auto'，其应用值为负的'right'值（即盒向左移动'right'值）

如果'right'被指定为'auto'，其应用值为负的'left'值

如果'left'和'right'都不是'auto'，位置就被过度约束（over-constrained）了，它们（'left'和'right'）其中有一个会被忽略。如果包含块的'direction'属性是'ltr'，那么'left'有效，'right'变成-'left'（负的'left'）。如果包含块的'direction'属性是'rtl'，那么'right'有效，'left'被忽略

示例 下列3条规则是等价的：

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 }

'top'和'bottom'属性会上下移动相对定位的元素，不会改变其大小。'top'把盒向下移，'bottom'向上移。因为盒没有被分割或者拉伸，所以'top'或'bottom'的应用值总是（满足）：top = -bottom。如果都是'auto'，它们的应用值就都是'0'。如果其中一个是'auto'，它会变成另一个的相反数。如果都不是'auto'，就忽略'bottom'（即'bottom'的应用值将是负的'top'值）

注意 脚本环境中，相对定位盒的动态移动能产生动画效果（另见<u>'visibility'</u>属性）。尽管相对定位可以用作上标和下标的形式，但行高不会因为其定位而自动调整。更多信息请查看<u>[行高的计算]</u>中的说明