这在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元素的绝对定位。