相对定位元素的填充是否影响绝对定位子元素的（0,0）？

Question

这是一个对我没有意义的CSS问题..

现在我有这样的事情：

.container {
  height: 500px;
  width: 500px;
  position: relative;
  padding: 10px;
}

.child {
  top:0px;
  left:0px;
  position:absolute;
  width: 100px;
  height: 100px;
}

孩子现在无视父母的填充。这对我来说似乎是违反直觉的。我错过了快速修复（我无法为孩子添加填充/边距）？我弄乱了DOCTYPE吗？

谢谢！ 马特穆勒

Answer 1

由于您已为子元素指定了绝对位置，因此该行为是正确的。孩子将完全定位左侧和顶部值。

  

在绝对定位模型中，a   框明确地相对偏移   到它的包含块。 已删除    完全来自正常流程 （它有   对后来的兄弟姐妹没有影响）。一个   绝对定位的盒子建立   正常流量的新包含块   孩子们和绝对的（但不是   固定的）后代。   但是，绝对的内容   定位元素不会流动   任何其他盒子。他们可能会模糊   另一个盒子的内容（或者是   模仿自己），取决于   堆叠重叠框的水平。

Visual Formatting model - Absolute positioning