Question

我是网页设计的新手，并试图理解CSS中定位的概念。我对元素定位相对和绝对有一些了解。在下面的小提琴中，我有<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

当设置为绝对或固定时，元素将从文档的正常流程中完全删除。

因此，当您为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>

Answer 2

除非你想要

，否则我建议你避免使用position: absolute

元素重叠其他元素或与其他元素重叠
元素从正常的文档流程中删除

除非你想要

，否则我建议你避免使用position: relative

具有position: absolute后代的元素，并且您希望当前元素为绝对定位的后代指定坐标系。演示：

.relative {
  position: relative;

  /* optional styles for demo */
  margin-top: 30px;
  margin-left: 30px;
  padding: 20px;
  width: 250px;
  height: 150px;
  border: 1px solid red;
  background-color: yellow;
}

.absolute {
  position: absolute;
  bottom: 10px;
  top: 50px;
  right: 15px;
  
  /* optional styles for demo */
  padding: 20px;
  background-color: tomato;
  border: 1px dotted blue;
  text-align: center;
}

<div class="relative">
  Position: relative;
  <div class="some-intermediate-container">
    <div class="absolute">
      Absolutely positioned descendant
    </div>
  </div>
</div>

<div class="absolute">
  Absolutely positioned relatively<br /> to document
</div>

元素在应用top，left，right，bottom之前占用原始空格。演示：

span {
  background-color: yellow;
}

.relative {
  position: relative;
  /* move to 10px bottom but preseve original occupied space */
  top: 15px;
}

<p><span>One</span> <span>Two</span> <span class="relative">Three</span> <span>Four</span></p>

如果您只想将span和p移至10px，请在此处使用margin-top。演示：

div {
  border: 2px solid black;
  padding: 10px;
}

p {
  margin-top: 10px;
}

span {
  margin-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>

CSS相对绝对的位置

2 个答案: