위치를 가진 이미지를 상대적으로 정렬 할 수 있습니까? position : absolute?

Question

페이지에 두 개의 이미지가 있습니다. 첫 번째 이미지는 position : relative이고 두 번째 이미지는 position : absolute 인 첫 번째 이미지 바로 아래에 있습니다. 두 번째 이미지를 다른 이미지와 정렬하여 상대적 위치가 확대 또는 축소되는 것처럼 유지할 수 있습니까?

Answer 1

브라우저로 확대/축소하면 요소 위치가 충돌하는 것이 일반적인 상황입니다. 그래서 그 일에 너무 많은 관심을 기울일 것을 권하지 않습니다. 하지만 어떤 경우에도 이미지의 부모 위치는 "위치 : 상대적"이어야합니다.

HTML

<div class="myImageContainer"> 
    <img class="positionedRelative" src="" alt="" /> 
    <img class="positionedAbsolute" src="" alt="" /> 
</div> 

CSS

.myImageContainer { position: relative; } 
img.positionedRelative { position: relative; } /* not necessary, try to remove */ 
img.positionedAbsolute { position: absolute; left: 0; top: 0; } 

왼쪽 : 0; 상단 : 0; - 자신의 값을 삽입하십시오.

Answer 2

Something like this?