爲什麼在某些情況下會忽略背景顏色？

我：爲什麼在某些情況下會忽略背景顏色？

<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。

如果你想讓你的顏色出現指定高度或不要讓你的內部絕對絕對。

來源