當屏幕分辨率發生變化時，絕對圖像位置不起作用

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; 
} 

筆記 '圖像/識別-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的負邊距將圖像的中心定位在瀏覽器的中心。