html - 可变高度上的 CSS 绝对位置

Question

我在父 div 中有两个 div。我想放置 div 以使 div 1 的位置是bottom:0父 div 的绝对位置，并且 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

像这样尝试（演示）：

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

.box1{
    background: yellow;
}

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