html - 使用位置 : relative 操作后删除 block /空间

Question

我有 3 个 div，其中包含 3 种不同的颜色和一个段落。我对段落进行了一些操作，以便可以将其移动到任何地方

 p {
    width: 50%;
    border: 1px solid black;
    margin: 0 auto;
    position: relative;
    bottom: 350px;
  }

但是在它移动之后，问题是段落 block 的最后位置仍然存在，我希望它完全删除。我怎样才能做到这一点？ 我会提供 SS，以便您了解我想要什么。

Answer 1

当使用 position:relative 移动元素时，它的第一个位置(它占用的空间)保持不变。如您所见here :

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

div.red {
  background: red;
  height:120px;
}
div.blue {
  background: blue;
  height:120px;
}

p {
  color: #fff;
  padding: 20px;
  position: relative;
  top: -100px;
}

<div class="red">
</div>
<p>lorem ipusme lorem ipusmelorem ipusmelorem ipusme</p>
<div class="blue">
</div>

相反，您需要使用 position:absolute 并将 position:relative 添加到父容器，以便仍然能够相对于其初始位置移动元素。

div.red {
  background: red;
  height: 120px;
}

div.blue {
  background: blue;
  height: 120px;
}

div {
  position: relative;
}

p {
  color: #fff;
  padding: 20px;
  position: absolute;
  top: -100px;
}

<div class="red">
</div>
<div>
  <p>lorem ipusme lorem ipusmelorem ipusmelorem ipusme</p>
</div>
<div class="blue">
</div>