CSS进阶06-相对定位Relative Positioning

love丁酥酥

发布于 2018-08-27 15:29:16

6430

发布于 2018-08-27 15:29:16

文章被收录于专栏：coding for love

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. 简介

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

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

2. left 和 right

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

left和right取值有如下情况：

如果 left 和 right 的值均为 auto （默认值initial value），则使用值为 0 （即是说，盒保持在其原位）。
如果 left 是 auto ，其使用值为 right 的负值（即盒向左移动 right 值）。
如果 right 是 auto ，其使用值为 left 的负值。
如果 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 的负值）。

注：在脚本环境中动态移动相对定位盒可以产生动画效果（见 'visibility' 属性）。尽管相对定位可被用于上标和下标效果，但行高在自动调整时不会将其定位纳入计算。参见line height calculations一节的描述了解更多信息。