css - 父 div 不会随着子 div 的增长而扩展

Question

我在外部 div 中有一个内部 div。

当我为 innerdiv 设置 top: SomeValue 时，它​​与外部 div 重叠。

#div1{
    position: relative;
    top: 10px;
    left: 20px;
    width: 50%;
    background: green;
}

#div2{      
    position: relative;
    top:5px;
    left: 20px;
    width: 80%;
    background: red; 
}

这是我的 jsfiddle

如何克服？

Answer 1

您不能为此使用 Top 属性。因为它会忽略它的父边界。

改用padding-top

{ position: relative; padding-top:5px; left: 20px;  width: 80%;  background: red; }