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

Question

我在大div内有两个小div - s。当我向所有这些div添加top属性时，较小的divs会落在较大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，因此孩子与父级重叠。

Answer 2

为了回答你的问题，我认为here是对Css-Tricks relative css定位的一个很好的解释

1. 自定义<div>和top:10px;后，较小的left:10px;相对定位，内部<div>从顶部移开10个像素剩下。如果您没有定义任何定位属性（顶部，左侧等），position:relative;将仅用作静态。

2. 虽然margin做的事情不同于position。如果您使用谷歌浏览器（我不确定其他浏览器），您可以通过Inspect Element轻松测试或玩这个。那么它的作用是在外部div和内部div之间添加一个边距，而不管position:relative。

我希望这能回答你的问题。