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

Question

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

当我设置 top: SomeValue for innerdiv 时，它与外部 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; }

Answer 2

您将 div2 部分定位在 div1 之外。如果要将 div2 限制在 div1 中，则需要在 div1 上设置 overflow:hidden。

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

Answer 3

相对定位：

相对定位的元素是相对于其正常位置定位的。

http://www.w3schools.com/css/css_positioning.asp

您在 上使用相对定位div2，因此它忽略了它是嵌套 div 并将其从正常位置移开的事实。

我用解决方法更新了小提琴：

http://jsfiddle.net/P6dbe/2/

小提琴使用以下 css 删除 的相对位置div2并添加填充div1：

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

#div2
    { 
      width: 80%;  
      background: red; 
    }