屏幕分辨率更改时，绝对图像位置不起作用

Question

我想将图像放在另一张背景图像上，但是当我改变屏幕分辨率时，我想要放置在背景图像上的图像会改变它的位置。我使用下面的代码

       <div id="identification ">
            <div class="identification-image-1">
                <a href="form.html">
                    <img id="image-1" src="images/identification-1.png" alt="" />
                </a>
            </div>

            <div>
                <a href="form.html">
                    <img src="images/identification-new.png" alt="" width="100%" /> 
                </a>
            </div>
        </div>

CSS代码：

#identification {
margin-top: 20px;
position: relative;
}

.identification-image-1 {
position: absolute;
margin-top: 200px;
margin-left: 350px;
 }

注意'images / identification-new.png'是宽度为100％的背景图片。 上面的代码解决了我的问题但是当我改变屏幕分辨率时，绝对位置不起作用。

Answer 1

您的边距应设置为容器高度和宽度的百分比。当屏幕分辨率或浏览器窗口的大小发生变化时，.identification-image-1将相对于容器移动。由于背景图像是容器的100％，所以一切都将同步。

例如

.identification-image-1 {
position: absolute;
top: [your percentage];
left: [your percentage];
margin-left: [negative margin];
margin-top: [negative margin];
}

使用绝对定位left:50%使图像居中会使左边缘移动到浏览器的中心。使用imgWidth / 2的负边距将图像的中心定位在浏览器的中心。