文書のどこにでも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; 
}