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

【问题标题】：Css Top property on relative elements make them fall outside the container相对元素上的 Css Top 属性使它们落在容器之外
【发布时间】：2016-03-01 04:23:05
【问题描述】：

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

Jsfiddle 在， http://jsfiddle.net/zqsyv5mj/

1）为什么外部div没有相对定位时，较小的div会落在外面？

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

【问题讨论】：

标签： css position margin

【解决方案1】：

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

较小的<div> 相对定位，因为您定义了top:10px; 和left:10px;，内部<div> 从顶部和左侧移动了10 个像素。如果您没有定义任何定位属性（顶部、左侧等），position:relative; 将仅用作静态属性。
虽然margin 做的事情与position 不同。如果您使用的是 Google Chrome（我不确定其他浏览器），您可以通过 Inspect Element 轻松地测试或使用它。所以它的作用只是在外部 div 和内部 div 之间添加一个边距，不管position:relative。

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

【讨论】：

【解决方案2】：

您较大的div 没有具体尺寸，但它添加了其子min-height: 100px 的尺寸，使其高度为200 像素。

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

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

【讨论】：