绝对定位在这里如何工作？答案

【问题标题】：How the absolute positioning works here?绝对定位在这里如何工作？
【发布时间】：2016-05-05 02:34:02
【问题描述】：

如果绝对定位将对象从常规内容流中移除，那么为什么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>

【问题讨论】：

标签： html css

【解决方案1】：

还有为什么容器只是跟随盒子，而不是整个宽度（因为 div 是块级元素）？

这是因为您将其定位设置为absolute，从而迫使其仅占用其子项所需的空间。

div#container { position: absolute; }

如果你想让它占据所有宽度，去掉absolute定位。

如果绝对定位将对象从常规内容流中移除，那么为什么 div#container 仍然跟随那些框（当框的宽度减小或增加时，div#container 也会根据它进行自我调整并覆盖所有的盒子。

将absolute 定位添加到您的框，父container 将不再“跟随”它们。

* {
  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 ===
}

  <h1>Positioning Elements</h1>

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

【讨论】：

关于 OPs 最后一个问题，你说的很有道理。我似乎无法在规范中找到它。 spec 实际上似乎与 OP 的假设一致，即 div 应该保持阻塞并因此占据整个宽度。我可能在某处做出假设错误。无论如何，谢谢你的回答。

【解决方案2】：

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

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

【讨论】：