我的链接从他们（可调整大小的）父区域中徘徊

Question

我不知道为什么div Link1没有键入div bg1。

我认为它的位置应该停留在图片中的指定位置，即使图片调整大小。相反，当我调整页面大小时，它会键入整个页面并远离图片。

这是页面的骨架：

http://www.jacamart.de

<div id="bg1">
    <img src="bg.jpg">
    <a href="feld2.htm" target="feld" onmousedown="if (event.preventDefault) event.preventDefault()">
        <div id="link1"></div>
    </a>
</div>

#bg1 img {
    width: 100%;
    Position:absolute;
    top: 0;
    right: 0;
}
#link1 {
    background-color: blue;
    background-size: 100%;
    width: 10%;
    height: 5%;
    position:absolute;
    top: 48%;
    right: 0%;
    opacity:0.5;
    filter:alpha(opacity=0);
    /* For IE8 and earlier */
    z-index: 4;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#link1:hover {
    opacity:0.1;
    filter:alpha(opacity=10);
    /* For IE8 and earlier */
}