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

#Fiddle

Answer 1

由于你的#side是绝对的。

就像在认为内容为空的地方漂浮一样。

如果您从#side移除绝对位置，则可以正常工作。

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

Answer 2

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

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

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

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

您正在查看您定义的CSS规则的预期行为。

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

Answer 3

我认为这是对Side元素的绝对定位。

这在CSS中是正常的吗？

3 个答案: