html - 在调整浏览器窗口/分辨率大小时保持元素位置

Question

基本上我使用的是背景(正文)，我需要将某些元素准确定位在我想要的位置(我使用顶部/左侧 %)(通常是图像和表格，但在这个例子中我使用了简单的div 元素)；在调整浏览器窗口大小/更改分辨率后，元素当然会相应地移动到新大小，因此它们会改变位置。我尝试使用 div parent 来解决这个问题，但我失败了。 HTML 和 CSS:

body
{
background:black;
}
#content
{
    background:blue;
    top:1%;
    position:relative;
    height:900px;
    max-width:1600px;
    margin-left:auto;
    margin-right:auto;
}

.a
{
position:absolute;
background:yellow;
height:600px;
width:800px;
top:15%;
left:5%;
}

.b
{
background:red;
height:100px;
width:100px;
position:absolute;
top:50%;
left:80%;
}

<div id="content">

<div class="a">
Box1
</div>

<div class="b">
Box2
</div>

</div>

Answer 1

我已将值更改为 px 而不是 % 这会有所帮助 数值不准确，仅供描述

body
{
background:black;
}
#content
{
    background:blue;
    top:9px;
    position:relative;
    height:900px;
    max-width:1600px;
    margin-left:auto;
    margin-right:auto;
}

.a
{
position:absolute;
background:yellow;
height:600px;
width:800px;
top:150px;
left:50px;
}

.b
{
background:red;
height:100px;
width:100px;
position:absolute;
top:50px;
left:80px;
}

<div id="content">

<div class="a">
Box1
</div>

<div class="b">
Box2
</div>

</div>