[英]Is this normal in CSS?
The background of the BODY tag extends to fit the sidebar, but the background of the #wrap
element doesn't. BODY标签的背景扩展到适合侧边栏,但
#wrap
元素的背景不适合。 Why? 为什么?
HTML: 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: CSS:
body{
background: #333;
}
#wrap{
position: relative;
background: #cc4;
}
#side{
position: absolute;
top: 0;
left: 0;
}
Its due to your #side
being absolute. 这是由于您的
#side
是绝对的。
It's like floating where it thinks the content is empty. 就像漂浮在认为内容为空的地方。
If you remove position absolute off from #side
, then it works. 如果您从
#side
移除绝对位置,则它可以工作。
It just thinks the box is empty and so there is nothing to put a background on. 它只是认为盒子是空的,因此没有任何背景可言。
The #wrap
element has no content, hence no height, so the background color is not visible. #wrap
元素没有内容,因此没有高度,因此背景色不可见。
If you specified a height value, you would see it, for example: 如果指定了高度值,则会看到它,例如:
#wrap{
position: relative;
background: #cc4;
height: 400px;
}
The #side
element is absolutely positioned so it does not contribute to the height of the parent container (using absolute position takes the element out of the normal content flow). #side
元素的位置绝对正确,因此不会增加父容器的高度(使用绝对位置会使该元素脱离正常的内容流)。
You are seeing the expected behavior for the CSS rules that you defined. 您将看到所定义的CSS规则的预期行为。
Since the body
tag is the root level container, it encloses everything, including all floated and absolutely positioned descendant elements, hence, the background color (or image) covers everything. 由于
body
标签是根级别的容器,因此它包围了所有内容,包括所有浮动的和绝对定位的后代元素,因此,背景颜色(或图像)覆盖了所有内容。
我认为这是对Side元素的绝对定位。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.