I am relatively new to the world of web design and currently grappling with the concept of positioning in CSS. I have a basic understanding of relative and absolute positioning for elements. In the code snippet below, there is a <div> that acts as the parent to both a <p> and a <span>. Interestingly, when I set the p element to position:absolute, the border seems to overlap, whereas when I apply the same style to the <span>, everything falls into place quite nicely (allowing me to move the text within the border). Can someone please explain why this discrepancy is happening and what I might be missing here?
div {
position: relative;
border: 2px solid black;
padding: 10px;
}
p {
position: absolute;
top: 10px;
}
span {
top: 10px;
}<div>
<span>possessions</span>
<p>
Five suspected gang members attacked two agents who were escorting them in a lift, the Investigative Committee said. The group was handcuffed and it wasn't immediately clear how they managed to free themselves to attack the guards. The two other suspects
and three security officers were wounded. The suspects were accused of being part of a group known as GTA Gang, named after the violent game series Grand Theft Auto. The group of Central Asian nationals was suspected of killing 17 motorists in the
Moscow area between 2012 and 2014. Cars were forced to stop on a main road and their drivers were killed for reasons as yet unknown; none of their belongings were stolen.
</p>
</div>