相关元素的 Css Top 属性使它们落在容器之外

Question

我在一个大的 div 中有两个小的 div。当我向所有这些 div 添加 top 属性时，较小的 div 落在较大的 div 的边界之外。

Jsfiddle 位于， http://jsfiddle.net/zqsyv5mj/

1)为什么外面的div没有相对定位，小的div会掉到外面？

2) 当我使用 margin-top 而不是 top 时，这个问题就消失了。为什么会这样？

Answer 1

较大的 div 没有特定尺寸，但它添加了其子元素的尺寸，即 min-height: 100px 使其高度为 200px。

然后您指示子项在父项中可以占据的第一个位置是 10px,10px(因为它们是 position: relative)，因此它们会溢出父项。

使用 margin-top，您将父元素移动到 10px,10px 位置，但它的内部位置保持为 0,0，因此子元素与父元素重叠。