CSS定位属性之相对定位relative属性详解

相对定位介绍

在CSS中，有3种常见的定位方式：绝对定位（absolute）、相对定位（relative）和固定定位（fixed）。

相对定位是相对于元素原来的位置进行移动，不会影响其他元素的布局，可用于微调布局。

相对定位可以通过CSS的position属性来实现：

.selector {
  position: relative;
}

相对定位的移动方式

相对定位可以通过top、right、bottom、left属性来进行移动。

top属性用于控制元素上方的空间距离，right属性用于控制元素右侧的空间距离，bottom属性用于控制元素下方的空间距离，left属性用于控制元素左侧的空间距离。

这些属性的值可以是任意数字，也可以是百分比、em或rem。

值为正数表示向外移动，即距离上方或左侧的距离增加；值为负数表示向内移动，即距离上方或左侧的距离减少。

下面是一个简单的例子：

.selector {
  position: relative;
  top: 20px;
  left: 30px;
}

相对定位与文档流

相对定位不影响其他元素的位置，因此也不会改变文档的布局流。

例如，在一个有多个元素的页面中，如果我们对其中一个元素使用相对定位，并将其向上移动50个像素：

.selector1 {
  position: relative;
  top: -50px;
}
.selector2 {
  /* other styles */
}

即使“selector1”元素被移动了一段距离，但是其它元素不会因为它的运动而被影响。

总结

相对定位是CSS布局中值得掌握的一项技能，它能够使我们在保持文档流的同时进行微调。

通过position、top、right、bottom、left属性可以轻松地实现相对定位，掌握好这些技能可为我们的工作带来便利。