CSS在绝对高度上的绝对位置

Question

我在父div中有两个div。我想放置div，以便div 1位置在父div的bottom:0处是绝对的，而div 2总是位于div 1的顶部。

我使用绝对位置来放置div。然而问题是div 1具有可变高度。在这种情况下，如何将div 2放在div 1的顶部？ 请参阅附图：

我正在尝试这个，但它不起作用：

HTML：

<div class="box">
   <div class="wrap">
       <div class="box2">box 2</div>
       <div class="box1">box1</div>
    </div>
</div>

CSS：

.box{
    width: 200px;
    height: 200px;
    background: green;
    position: relative;
}

.wrap{
    position: absolute;
    bottom: 0;
    border: 1px solid blue;
}

.box1{
    background: yellow;
    height: 50px;
    position: relative;
}

.box2{
    background: red;
    position: absolute;
    top: 0;    
}

演示： http://jsfiddle.net/P46ht/

Answer 1

你快到了。

试试这个 - 基本上从框中删除位置，并在.wrap上设置宽度：

.wrap{
    position: absolute;
    bottom: 0; left:0;right:0;
    border: 1px solid blue;
}

.box1{
    background: yellow;
}

.box2{
    background: red;
}

示例：http://jsfiddle.net/P46ht/1/

Answer 2

尝试（DEMO）：

.wrap{
    position: absolute;
    bottom: 0;
    width: 100%;
    border: 1px solid blue;
    box-sizing: border-box;
}

.box1{
    background: yellow;
}

.box2{
    background: red;
    height: 50px;
}