html - 可变高度的 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/