Question

我有：

<div style="position: relative; width: 500px; background-color:Yellow;">
    <div style="position: absolute; top: 0px; left: 0px;">A</div>
    <div style="position: absolute; top: 0px; right: 0px;">B</div>
</div>

background-color被忽略。但是当我删除第一个inside-div的style时，显示的颜色。为什么呢？

Answer 1

为你的第一个div设置一个高度

像：

<div style="height:30px;position: relative; width: 500px; background-color:Yellow;">
    <div style="position: absolute; top: 0px; left: 0px;">A</div>
    <div style="position: absolute; top: 0px; right: 0px;">B</div>
</div>

http://jsfiddle.net/pcAjF/

Answer 2

当一个元素绝对定位时，它将从文档流中取出，这意味着包含元素的行为就好像它不存在一样。因为两个内部div都是绝对定位的，所以外部div没有高度。

Answer 3

absolute个定位元素不是父维度的一部分。这意味着如果你有一个auto高度的元素并且它内部只有一个绝对定位的div，那么它将导致0高度，所以如果你指定了任何background-color，它将不会有任何{{1}}

如果您想让颜色显示指定高度或不使您的内部div绝对。

Answer 4

对于两个内部absolute，您有position <div>，因此height和width为零。

为什么在某些情况下会忽略背景颜色？

4 个答案: