html - CSS 相对-绝对位置

Question

我是网页设计新手，想了解 CSS 中定位的概念。我对相对和绝对定位元素有一些了解。在下面的 fiddle 中，我有一个 <div>作为 <p> 的父级.当我做 p position:absolute ，边框崩溃不像我制作 <span> 时那样position:absolute ，它的行为符合预期(我能够移动带有边框的元素中的单词)。请指出我看错了什么？为什么边界仅在 <p> 的情况下崩溃绝对定位

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 was not 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 were stolen.
  </p>
</div>

Answer 1

When set to absolute or fixed, the element is removed completely from the normal flow of the document.

因此，当您为 p 元素定义 position:absolute 时，它会从文档的正常流中移除，并且边框会崩溃。但是当你没有为 p 定义位置时，它会获得默认位置(静态位置)并保持在文档流中并且边框不会崩溃。

您可以在 p 中使用 relative 而不是 absolute。

div{
  position:relative;
  border:2px solid black;
  padding:10px;
  
  }
  
  p {
   position:relative;
   top:10px;
  }
  
  span{
   position:absolute;
   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 was not 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  were stolen.
</p>
</div>