html - div 出现在另一个下方时出现问题

Question

我有两个 div。首先充当各种旗帜。下一个只是我试图直接放在第一个 div 下方的一个小 div。我试过去掉 float 并添加 clear: both。也许我错过了什么？下面是我的 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。#us 中的top 的大小必须与#background 中的height 的大小相同。我还为您添加了 box-sizing:border-box; 边框不占用空间。