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

Question

基本上我使用的是background（body），我需要将某些元素准确地定位在我想要的位置（我使用了上/左％）（通常是图像和表格），但是在此示例中，我使用了简单的元素div元素）；在调整浏览器窗口大小/更改分辨率之后，元素当然会相应地移动到新的大小，因此它们会更改位置。我尝试使用div父级来解决该问题，但失败了。 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>

Answer 2

.a, .b{transform:translate(-50%,-50%);}

添加此CSS之后，您需要根据要显示这些div /图像的位置来更改顶部和左侧的值。