Html “如何让标记器正常工作”；“响应性”；也

最近我做了一个很好的雨雷达图片组装， 允许在下雨时立即观看，是或否

缩小URL窗口时，两张图片（彼此相邻）也会缩小。到现在为止，一直都还不错。比如,

在这两张照片中，每一张都可以看到一个红色的标记，在这个例子中，它显示了德国汉堡市附近一个小村庄的确切位置

然而，当我缩小URL窗口时，两个标记（显然）开始移动到其他位置，至少：它们的新位置不再对应汉堡附近的那个小村庄

在缩小URL窗口时，我正在努力使两个标记保持在正确的位置。如有任何关于如何解决的建议，我们将不胜感激

请在下面找到CSS/HTML脚本：

<style type="text/css">

.table1 { 
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-width: 6px; 
    border-style: double;
    font-family: verdana;
    font-style: normal;
    font-weight: bold;
    font-size: 120%;
    text-align: center;
}
.td1 { 
    border-width: 6px; 
    border-style: double;
    padding: 5px;
}
.img {
    height: auto;
    width: 100%;
}

#outer-left {
    position:relative;
    z-index:0;
}
#outer-right {
    position:relative;
    z-index:0;
}
.inner-left {
    position:absolute;
    z-index:1;
    bottom: 192px;
    right: 115px;
}
.inner-right {
    position:absolute;
    z-index:1;
    bottom: 250px;
    right: 161px;
}
</style>


<table class="table1">
<tr>
<td class="td1">Niederschlagsradar West-Europa</td>
<td class="td1">Niederschlagsradar Deutschland</td>
</tr>

<tr>
<td id="outer-left" class="td1">
<img src="http://api.buienradar.nl/image/1.0/RadarMapEU?" height="auto" width="100%" >
<div class="inner-left"><img src="http://mirpir.eu/mark2.gif" alt="Rellingen" /></div>
</td>

<td id="outer-right" class="td1">
<img src="http://www.niederschlagsradar.de/image.ashx?type=loop1stunde&jaar=&regio=homepage&tijdid=201112050910&time=" style="float: left; filter: alpha(opacity=90); -moz-opacity: .9; opacity: .9; border-width: 0px; height="auto" width="100% " />
<div class="inner-right"><img src="http://mirpir.eu/mark2.gif" alt="Rellingen" /></div>
</td>

</tr>
</table>
<br><br>

.表1{
宽度：100%；
左边距：自动；
右边距：自动；
边框宽度：6px；
边框样式：双边框；
字体系列：verdana；
字体风格：普通；
字体大小：粗体；
字体大小：120%；
文本对齐：居中；
}
.td1{
边框宽度：6px；
边框样式：双边框；
填充物：5px；
}
.img{
高度：自动；
宽度：100%；
}
#左外{
位置：相对位置；
z指数：0；
}
#外右翼{
位置：相对位置；
z指数：0；
}
.左内侧{
位置：绝对位置；
z指数：1；
底部：192px；
右：115px；
}
.内右翼{
位置：绝对位置；
z指数：1；
底部：250px；
右：161px；
}
尼德施拉格拉达尔-西欧罗巴
德国尼德施拉格拉达尔酒店

以相对%单位设置标记位置，以便在调整容器大小时标记位置保持不变

.inner-left {
position:absolute;
z-index:1;
top: 34%;
left: 65%;
}

根据需要进行调整