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

Question

基本上我使用背景（体），我需要某些元件被精确地定位，其中i希望它们是（i使用顶部/左％）（通常图像和表格，但是在这个例子中我已经使用简单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 /图像的地方改变顶部和左侧值。