0

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;
}

＃小提琴

4

3 回答 3

2

是因为你#side是绝对的。

这就像漂浮在它认为内容为空的地方。

如果您从 中删除绝对位置#side，则它可以工作。

它只是认为盒子是空的，所以没有什么可以放背景的。

于 2013-08-19T01:13:52.203 回答
2

该#wrap元素没有内容，因此没有高度，因此背景颜色不可见。

如果您指定了一个高度值，您会看到它，例如：

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

元素是绝对定位的#side，因此它不会影响父容器的高度（使用绝对位置会使元素脱离正常的内容流）。

您将看到您定义的 CSS 规则的预期行为。

由于body标签是根级容器，它包含所有内容，包括所有浮动和绝对定位的后代元素，因此，背景颜色（或图像）覆盖了所有内容。

于 2013-08-19T01:14:07.107 回答
1

我相信这是对 Side 元素的绝对定位。

于 2013-08-19T01:10:16.210 回答