화면 해상도가 변경 될 때 절대 이미지 위치가 작동하지 않음

Question

다른 배경 이미지에 이미지를 배치하고 싶지만 화면의 해상도를 변경할 때 배경 이미지 위에 배치 할 이미지의 위치가 변경됩니다.

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

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

주 '이미지/식별-new.png'폭 100 %의 배경 이미지입니다 : 나는 아래의 코드를

 <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 코드를 사용합니다. 위의 코드는 내 문제를 해결하지만 화면 해상도를 변경하면 절대 위치가 작동하지 않습니다.

Answer 1

여백은 컨테이너 높이와 너비의 백분율로 설정해야합니다. 화면 해상도 또는 브라우저 창의 크기가 .identification-image-1으로 변경되면 컨테이너에 상대적으로 이동합니다. 배경 이미지가 컨테이너의 100 %이기 때문에 모든 것이 동기화됩니다. 브라우저의 중심으로 좌측 에지 시프트 것이다 left:50% 절대 위치를 사용하여 이미지를 센터링 예

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

위한

. 마이너스 여백 인 imgWidth/2를 사용하면 이미지 중앙이 브라우저 중앙에 배치됩니다.