removing the block/space after manipulated with position: relative - html

Question

I have the 3 div with 3 different of color and a paragraph. And i do a little manipulating with the paragraph so it can be moved anywhere with
p {
width: 50%;
border: 1px solid black;
margin: 0 auto;
position: relative;
bottom: 350px;
}
But after it moved, the problem is the last position of the block of paragraph still there and i want it to completely remove. How can i do that?
I will provide the SS so you can understand what i want.

Answer 1

When using position:relative and move the element, its first place (the space it takes) remain unchanged. As you can read 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>
Instead you need to use position:absolute and add position:relative to the parent container to still be able to move the element relatively to its initial place.
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>