アニメーションレスポンシブルSvg-Map

Question

まずはメリークリスマス！

私は応答可能なクリック可能なマップを作成しようとしています。私はSVG画像の位置を安定に保つことに失敗しています。こちらをご覧ください：http://wp12730465.server-he.de/heim/

私はこれを解決する方法がありません。あなたが見ることができるように、オーバーレイ画像は飛び回って、ウィンドウが拡大縮小された時の位置を失います。

アイデア？ ベスト、 アンカ

Answer 1

私はあなたの質問を正しく理解しています。私はgelaende divへの相対的な位置を変更しました。

.gelaende { 
     position: relative; 
     width: 100%; 
     float: left; 
} 

Answer 2

メリークリスマスあまりにも:)それをする 最善の方法は、[位置： "相対的"]与えている：

<div class="section"> 
<div id="responsiveTabs" class="r-tabs"> 
<ul id="tabs" class="r-tabs-nav"> 

あなたにこの1（.SECTION）である親のdivに。 ..

&は、その上に使用する1つの画像ごとに[position： "absolute"]も定義します。あなたがトップと左の位置は、一つ一つの画像に変更される必要がある気づいてきたように

#heim { 
width: 14vw; 
position: absolute; 
height: auto; 
top: 12vw; 
left: 0; 
} 

：画像の下 が良い例です。