Html 分区边框未覆盖所有子分区

我有一个div围绕着多个div。如图所示，父div的边框未覆盖所有子div。谁能告诉我这里的问题是什么

<div style="border:1px dashed gray;">
    <div style="position:relative;top:10px;"><input type="text" placeholder="https://" /></div>
    <div style="position:relative;top:30px;"><input type="text" placeholder="https://" /></div>
    <div style="position:relative;top:50px;font-size: 10px">Some content</div>
    <div style="position:relative;top:60px;background-color:#E6E0EC">
        <div class="glyphicon glyphicon-remove"></div>
    </div>
</div>

一些内容

---

jsiddle

在这种情况下，使用

top

指定间距不是一个好主意。它将是脆弱的。让图元为自己腾出空间，让长方体模型在父对象中腾出空间。要执行此操作，请使用

页边距顶部

---

Fiddle:

您在未被边框包围的div上使用的是

位置：relative

。相对位置属性移动元素的内容，但在正常流中保留元素的保留空间

如果您希望在所有内容周围使用边框实现相同的布局，最好使用

margin

属性。我更新了您的JSFIDLE以显示一个示例

---

不需要相对定位，在所有子div中，只需删除这些标记。

如果使用相对定位，它们会超出父div-这就是它的全部思想。我确实需要元素之间的一些间隙+边框应该覆盖所有div。如果删除相对，则无法从父div中指定位置。您正在使用相对定位将它们移动到父div之外。与此相反，我建议使用边距/填充物。我不认为你需要移动它们相对于父母的关系..好的。你能解释清楚为什么它覆盖了所有的输入标签，即使我在那里添加了更多，而不是其他的div吗？@sam这是巧合。外部div的大小与元素在没有

top

offset的情况下所占的大小相同。谢谢。确实如此。我接受你的回答，因为你提供了适当的解释。