绝对定位如何在这里起作用？

Question

如果绝对定位会从常规内容流中移除对象，那么为什么div#container仍然在这些框之后（当框的宽度减小或增加时，div#container也根据自身调整那个并覆盖所有的盒子。例如，当我将其中一个盒子的位置设置为绝对时，那么container也会自行减少）？还有为什么container只是在框之后，而不是整个宽度（因为div是块级元素）？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
}
h1 {
  margin-bottom: 15px;
}
div#container {
  background-color: #00FFFF;
  position: absolute;
}
p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin-bottom: 15px;
}
#p1 {
  background-color: #A52A2A;
}
#p2 {
  background-color: #DEB887;
}
#p3 {
  background-color: #5F9EA0;
}
#p4 {
  background-color: #FF7F50;
}

  <h1>Positioning Elements</h1>

  <div id="container">
    <p id="p1"></p>
    <p id="p2"></p>
    <p id="p3"></p>
    <p id="p4"></p>
  </div>

Answer 1

  

还有为什么容器只是在框之后，而不是整个宽度（因为div是块级元素）？

这是因为你将其定位设置为absolute，因此迫使它只占用其子女所需的空间。

div#container { position: absolute; }

如果您想占用所有宽度，请移除absolute定位。

  

如果绝对定位将对象从常规内容流中移除，那么为什么div＃container仍然跟在那些框之后（当框＃＆＃39;宽度减小或增加时，div＃容器也根据那个调整自己并覆盖所有盒子。

将absolute定位添加到您的框中，而父container将不再＆＃34;关注＆＃34;它们。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
}
h1 {
  margin-bottom: 15px;
}
div#container {
  background-color: #00FFFF;
  position: relative;             // < === HERE ===
}
p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin-bottom: 15px;
}
#p1 {
  background-color: #A52A2A;
}
#p2 {
  background-color: #DEB887;
}
#p3 {
  background-color: #5F9EA0;
}
#p4 {
  background-color: #FF7F50;
  position: absolute;             // < === HERE ===
}

＆＃13;

  <h1>Positioning Elements</h1>

  <div id="container">
    <p id="p1"></p>
    <p id="p2"></p>
    <p id="p3"></p>
    <p id="p4"></p>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

当一个元素具有绝对位置时，它意味着它的位置是相对于它的第一个定位父元素，这意味着它是第一个具有位置相对/绝对/固定/粘性的父元素。

根据它的子元素，它的行为仍然相同。