Question

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

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

我知道我可以在.test1上设置背景颜色，但是我需要这个背景是一个单独的div，以便使用jQuery对位置，不透明度，宽度等进行向后兼容（IE 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的宽度基于文本的宽度，并使.bg div为100％宽度并位于.caption下面？我应该重申，这需要在IE 7及更高版本中运行。

这是一个小提琴：http://jsfiddle.net/kbp6r/

Answer 1

对于定位问题，您必须依赖z-index;的魔力，它适用于具有非静态位置的元素（默认为position: 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中的内容确定，因为您已使用它的相对位置（根据我的建议））。

这是一个小提琴，展示了它的工作原理：http://jsfiddle.net/teddyrised/kbp6r/2/

Answer 2

更改您的html，如下所示。

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

绝对div内的100％div，没有宽度和固定高度

2 个答案: