如何使相对 div 不占用空间 - CSS

有时候，我们需要在页面布局中使用相对定位的 div 元素，但是它占用了页面布局中的空间，影响其他元素。

那么，怎样才能使相对 div 不占用空间呢？接下来，我们将介绍两种实现方式。

方式一：使用绝对定位

将相对 div 的父元素设置为相对定位，然后将相对 div 设置为绝对定位，即可使其不占用空间。代码如下所示：

.parent {
  position: relative;
}
.relative {
  position: absolute;
}

但是需要注意的是，使用绝对定位会脱离文档流，可能会影响其他元素的布局。

方式二：使用 margin 负值

将相对 div 的左右和上下两个方向的 margin 值设置为负数，和自身的宽高相等，即可使其不占用空间。代码如下所示：

.relative {
  position: relative;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
}

这种方式比较简单，但是需要注意的是，如果相对 div 内部还有其他元素，需要对其进行相应的位置调整。

总的来说，以上两种方式都是可以实现相对 div 不占用空间的，选择哪一种方式视具体情况而定。