문서의 어느 위치 에나 div를 배치하고 창 크기를 조정 한 후에 동일한 위치에 놓기

Question

이 질문을하는 것이 멍청한 느낌이 들지만 완벽한 대답은 찾을 수없는 것 같습니다.

지도가 있고 그 위에 몇 개의 핀을 설정하려고합니다. 지도는 정적 이미지이며 핀은 div의 배경 이미지입니다. 내 욕망 위치에 핀을 설정하려면, 나는 그 위치를 절대로 설정하고 그에 따라 핀을 움직인다 (왼쪽 위). 이제 창 크기가 조정 된 경우 핀이지도에 남아 있지 않음이 분명합니다.

위아래에 %를 사용하면 핀이 맵과 함께 움직이지만 핀의 위치가 너무 구체적입니다. 56px, 896px 등과 같이 백분율이 도움이되지 않습니다.

내가 할 수있는 다른 방법이 있습니까? 나는 jQuery를 사용하는 것에 신경 쓰지 않을 것이다. 그러나 CSS가있는 방법이 있다면 행복하다.

다음은 예입니다. http://jsfiddle.net/RKyGV/2/show/ 창 크기를 조정하십시오.

고마워요.

Answer 1

설정 위치 :지도에서 상대적; position : absolute를 사용하여 핀의 자식 요소로 핀을 배치합니다. 이제 그들의 좌표는 맵에 상대적입니다.

Answer 2

Antti Haapala와 마찬가지로 핀은 상대 위치 지정된지도의 절대 위치에있는 하위 요소이어야합니다. 그 것을 보여주는 fiddle입니다.

HTML

<div id="map"> 
    <div class="pin"> 
    </div> 
</div> 

CSS

#map{ 
    background:url("http://placehold.it/200x200"); 
    width:200px; 
    height:200px; 
    position:relative; 
} 

.pin { 
    background:url("http://placehold.it/16x16/915");width:16px;height:16px;position:absolute;top:150px;left:30px; 
}