Question

我有两个div。首先是各种各样的旗帜。接下来只是一个小div，我试图直接放在第一个div下面。我试图取消浮动并添加清除：两者。也许我错过了什么？下面是我的html和css

<div id="background">
</div>
<div id="us">
</div>

#background 
{
    width:  100%; 
    height: 10%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    border:1px solid #000;
    background-color:black;
    background-image: url(resources/images/****.png);
    background-repeat: no-repeat;
    background-position: center;
    clear: both;
}
#us
{
    display: block;
    width: 165px;
    height: 200px;
    left: 0px;
    align-top: auto;
    position: absolute; 
    background-image: url(resources/images/*****.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

第一个div确实显示在页面顶部并正确显示。第二个出现在第一个div的顶部。有什么建议吗？

Answer 1

检查一下。

Fiddle

只需将top:10%;添加到#us，因为您使用的是position:absolute。 top中#us的尺寸与height中#background的尺寸必须相同。我还为你的边框添加了box-sizing:border-box;，不占用空间。

Answer 2

您在第二个position: absolute;的CSS中使用了div(#us)，这就是它在第一个div之上显示的原因。将其更改为position: relative;或删除该行你准备好了。

Answer 3

尝试这个

#us
{display: block;
    width: 165px;
    height: 200px;
    left: 0px;
    align-top: auto;
    **margin-top: 50px;**
    background-image: url(resources/images/*****.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

div有问题出现在另一个下面

3 个答案:

Fiddle