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

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

<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被忽略。但是，当我删除style的第一个inside-div - 颜色是显示。为什么？

来源

2013-06-05 ispiro

由于两个内部div都绝对定位，外部div没有高度。 – Graham

为什么这个标记为asp.net？ – sjmarshy

@格拉汉姆但是他们在里面呢！ – ispiro

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

来源

2013-06-05 22:02:35 Graham

放一个高度到您的第一个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/

来源

2013-06-05 21:55:35

但是，这两个内部divs是在外部div。这是不是意味着它包含了它们的大小？ – ispiro

只有当你离开一个'内部'师与绝对位置。并给它一个高度。 –

你有一个absoluteposition两个内<div>是如此height和width为零。

来源

2013-06-05 21:55:47 Gabe

但他们是在外部div。这是不是意味着它包含了它们的大小？ – ispiro

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

如果你想让你的颜色出现指定高度或不要让你的内部绝对绝对。

来源