css - 如何让父 div 准确包含位置为 : relative with offset? 的子 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 的间隙。我需要 parent 完全包含 child 。是否有非 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;
}