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

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

1 个答案: