[分享]css中定位方式设相对定位

CSS中有多种定位方式，例如： 相对定位（: relative） 绝对定位（: absolute） 固定定位（: fixed）今天我们要讲的是相对定位。相对定位是指相对于元素原本的位置进行移动。我们可...

CSS中有多种定位方式，例如：

1. 相对定位（position: relative）
2. 绝对定位（position: absolute）
3. 固定定位（position: fixed）

今天我们要讲的是相对定位。

相对定位是指相对于元素原本的位置进行移动。我们可以使用 top、bottom、left、right 四个属性来调整位置。

比如，我们要把一个元素向下移动 10px，向左移动 5px，代码如下：

.box {
  position: relative;
  top: 10px;
  left: 5px;
} 

这样，.box 元素就会相对于它原本的位置向下移动 10px，向左移动 5px。

需要注意的是，使用相对定位并不会改变元素的布局位置，也就是说，其他元素的布局不会因为它而改变。

相对定位还可以和 z-index 属性一起使用，用来设置元素的层级。

现在我们可以练习一下，尝试在网页中使用相对定位为一个元素设定新的位置。记得要使用 position、top、left 等属性哦！