Css 100%div内绝对div，无宽度和固定高度

我需要有一个绝对定位的div，它包含两个子div：一个在顶部有文本，另一个在底部有背景色。像这样：

<div class="test1">
    <div class="caption">Text that determines width of parent.</div>
    <div class="bg"></div>
</div>

确定父对象宽度的文本。

我知道我可以在.test1上设置一个背景色，但我需要将这个背景作为一个单独的div，以便使用jQuery对位置、不透明度、宽度等进行向后兼容（即7+）控制

使用下面的CSS，我可以让一切正常工作，除了文本在.bg div后面。我需要文本在顶部

<style type="text/css">
.test1 {
    position: absolute;
    left: 100px;
    top: 100px;
}
.test1 .caption {
    float: left;
    white-space: nowrap;
}
.test1 .bg {
    height: 50px;
    background-color: #222;
}
</style>

.test1{
位置：绝对位置；
左：100px；
顶部：100px；
}
.test1.标题{
浮动：左；
空白：nowrap；
}
.test1.bg{
高度：50px；
背景色：#222；
}

如何使.test1的宽度基于文本的宽度，并使.bg div为100%宽度和下方的.caption？我应该重复一下，这需要在IE7和更高版本中工作

---

这里有一个难题：

对于定位问题，您必须依赖于

z-index的魔力（

；）它适用于具有非静态位置的图元（默认为

位置：static

）。因此，您是否考虑过绝对定位

.bg

元素，相对定位

.caption

元素

.test1 .caption {
    position: relative;
    white-space: nowrap;
    z-index: 2; /* More than .bg so it will be above */
}
.test1 .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* Less than .caption so it will be stacked underneath */
}

为了强制

.bg

元素与

.caption

具有相同的维度，当绝对定位元素声明了以下属性时，可以使用脏定位技巧：

top: 0;
left: 0;
bottom: 0;
right: 0;

它将填充到父容器的大小-在这种情况下，父容器的大小由

.caption

中的内容决定，因为您使用了它的相对位置（根据我的建议）

---

这里有一把小提琴，展示了它是如何工作的：

如下所示更改html

<div class="test1">
   <div class="bg">
      <div class="caption">Text that determines width of parent.</div>
   </div>
</div>

确定父对象宽度的文本。

@Gavin我很高兴它能帮上忙：）这解决了我的问题，但是我需要背景独立，因为我会给它添加效果，我不希望文本受到影响。