這在CSS中正常嗎？

Question

BODY標簽的背景擴展到適合側邊欄，但#wrap元素的背景不適合。 為什么？

HTML：

<div id="wrap">
    <div id="side"> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> </div>
</div> 

CSS：

body{
    background: #333;    
}

#wrap{
    position: relative;
    background: #cc4;       
}

#side{
    position: absolute;
    top: 0;
    left: 0;
}

＃小提琴

Answer 1

這是由於您的#side是絕對的。

就像漂浮在認為內容為空的地方。

如果您從#side移除絕對位置，則它可以工作。

它只是認為盒子是空的，因此沒有任何背景可言。

Answer 2

#wrap元素沒有內容，因此沒有高度，因此背景色不可見。

如果指定了高度值，則會看到它，例如：

#wrap{
    position: relative;
    background: #cc4;     
    height: 400px;
}

#side元素的位置絕對正確，因此不會增加父容器的高度（使用絕對位置會使該元素脫離正常的內容流）。

您將看到所定義的CSS規則的預期行為。

由於body標簽是根級別的容器，因此它包圍了所有內容，包括所有浮動的和絕對定位的后代元素，因此，背景顏色（或圖像）覆蓋了所有內容。

Answer 3

我認為這是對Side元素的絕對定位。