Question

当我尝试将此div（用作图像）相对于文档定位时，它不会显示，但是如果我定位它：绝对它是否有任何解决方法？

   #headr {
        background-image:url(../images/top%20bg.jpg);
        height:50%;
        width:100%;
        position:relative;
}

    <body>

<div id="headr">
</div>

Answer 1

如果要在其中放置相对内容，则必须将position: relative;添加到正文中。仅当父容器位于相对位置，固定位置或绝对位置时（默认情况下不是静态的），定位事物相对才有效。

Answer 2

如果#headr没有内容，则不会有高度。高度百分比仅在父级具有固定高度时才起作用。否则，您需要使用静态高度，如px或em ......

这是fiddle

CSS：

#headr {
    background-image:url("http://placekitten.com/200/100");
    height:50%;
    width:100%;
    position:relative;
}

.wrapper {
    height: 500px;
    background-color: #bada55;
}

HTML：

<div class="wrapper">
    <div id="headr">
    </div>
</div>

Answer 3

给出位置：相对于父div和位置：绝对于他的孩子（div）

相对于文档的CSS位置对象

3 个答案: