Javascript 滚动基础图像时，在叠加div上滚动内容

我有一个div覆盖了一个图像。顶部div包含一些交互式创建的svg内容。基础图像具有滚动条。当我滚动图像时，我希望覆盖div的内容也能相应地滚动。换句话说，在top div上以交互方式创建的任何项目的行为都应该与直接在图像上创建的项目相同。它应该相对于基础图像有一个固定的位置，并在图像滚动时滚动

以下是我所拥有的：

<div style="overflow: scroll; width: 800px; height: 680px">
          <img style="max-width: 780px; display: block;"
            src="someimage.png" />

        <div style="display: block; max-width: 780px; top:70px; left:0px; border: solid 1px red; position: absolute">This text should scroll when the image behind is scrolled.</div>

    </div>  

当滚动后面的图像时，此文本应滚动。

---

我愿意使用jquery或任何其他插件来实现这种行为。如有任何建议，将不胜感激

为什么不使用image作为div的背景，并键入div中的任何内容都将位于image的顶部

试着跟随

<div style="display: block; max-width: 780px; padding-top:70px; left:0px; border: solid 1px red;  background-image: url(someimage.png); height:1200px;">This text should scroll when the image behind is scrolled.</div>

滚动后面的图像时，此文本应滚动。

根据admoghal的建议，我尝试了以下方法：

<div style="width: 900px; height: 600px; overflow-y: scroll; overflow-x: hidden; display: block; position: absolute;">
   <div class="scales" id="holder" style='left: 0px; top: 0px; width: 1200px; height: 1000px; overflow: hidden; display: block; position: relative; max-height: 1000px; max-width: 1200px; background-repeat: no-repeat; background-image: url("someimage.png"); background-size: contain;'>
   </div>
</div>       

---

这在Firefox中运行良好，但由于“背景大小”在IE中不是有效的属性，我不得不使用来自的backgroundSize插件使其在IE中工作，现在我使用RaphaelJS插件并使用其图像功能在视口中显示图像。

我在编写的编辑器中遇到了相同的问题：溢出：包含图像的自动div和用于动态注释图像的SVG覆盖。以下是对我有用的东西（来自amdoghal的背景图像线索为我指明了正确的方向-dummy-map.png就是我正在注释的图像）

---

谢谢你的建议。我已经尝试使用图像作为背景图像，而不是单独的“img”元素。它确实克服了将图像和覆盖div作为单独实体的问题，但似乎在生成滚动条方面存在问题。

<div id="wme_map" style="height: 800px; border: 1px solid black; padding:0; overflow: auto;">
    <div id="svg-overlay"  style="width: 1920px; height: 1080px; background-image: url(dummy-map.png)">
        <svg width="1920" height="1080">
            <rect x=20 y=20 width=200 height=32 style="stroke:red; fill:none; stroke-width:2;" />
        </svg>
    </div>              
</div>