css中相对定位与绝对定位

CSS中有两种定位方式：相对定位和绝对定位。相对定位是相对于元素原本的位置进行位置调整，而绝对定位是相对于父元素进行位置调整。本文将详细介绍这两种定位方式。

相对定位

相对定位是指在原本的位置基础上进行位置的调整，也就是相对于元素本身进行调整。它可以使用position:relative属性来实现。相对定位的特点是元素的原本占位不变，只影响元素自身。

.box {
  position: relative;
  left: 50px;
  top: 20px;
} 

上面的代码实现了让元素向右移动50像素、向下移动20像素。

绝对定位

绝对定位是指在父元素内进行位置调整，不受其他元素影响。它可以使用position:absolute属性来实现。绝对定位的特点是元素占位不受影响，但是会影响其他元素的位置。

.parent {
  position: relative;
  height: 200px;
}

.box {
  position: absolute;
  left: 50px;
  top: 20px;
} 

上面的代码将一个元素放在父元素的左上角，向右移动50像素、向下移动20像素。

需要注意的是，绝对定位的元素如果没有父元素，则相对于文档进行定位。

总结

相对定位适合进行微调，不影响其他元素的占位；而绝对定位适合进行精细布局，但需要注意影响其他元素位置的问题。

.box {
  /*相对定位*/
  position: relative;
  left: 50px;
  top: 20px;
}

.parent {
  /*绝对定位*/
  position: relative;
  height: 200px;
}

.box {
  position: absolute;
  left: 50px;
  top: 20px;
}