Question

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

当我设置top：Somediv的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; }

Answer 2

您将div2部分定位在div1之外。如果你想在div1中约束div2，你需要在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/

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

#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; 
    }

随着子div的增长，父div不会扩展

3 个答案: