div邊界未涵蓋所有子div

Question

我有一個圍繞多個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>

JSFiddle 鏈接

Answer 1

您正在使用position: relative div上的position: relative ，但不被邊框包圍。 相對位置屬性移動元素的內容，但在正常流中保留元素的保留空間。

如果要在邊框周圍使用相同的布局，則最好使用margin屬性。 我更新了您的jsfiddle以顯示示例

的jsfiddle

Answer 2

在這種情況下，使用top指定間距不是一個好主意。 會很脆弱。 讓元素為自己騰出空間，讓盒子模型在父代中騰出空間。 為此，請使用margin-top 。

小提琴： http : //jsfiddle.net/markm/rmvneo88/

Answer 3

好吧，在所有子div中都不需要相對位置，只需刪除這些標簽即可。