如何让父div完全包含具有位置的子div：具有偏移的相对？

Question

<div class="outer">
    <div class="first">
    </div>
    <div class="second">
    </div>
</div>

.outer {
    border: 1px solid black;
    width: 200px;
}
.first{
    background-color: rgba(20,20,200,0.5);
    height: 100px;
}
.second{
    position:relative;
    top:-20px;
    background-color: rgba(50,50,50,.5);
    height: 100px;
}

http://jsfiddle.net/W5e4e/

我需要父类来准确包含两个子节点。当子div被定位为相对（为了向上或向下移动）时，父类仍然看到子处于静态位置。你可以在底部看到20px的差距。我需要父母准确地包含孩子。是否有非JavaScript解决方案？

Answer 1

而不是使用偏移量use a negative margin to move the child instead：

.second{
    margin-top:-20px;
    background-color: rgba(50,50,50,.5);
    height: 100px;
}