Question

I have a div overlaying an image. The top div has some interactively created svg contents. The underlying image has scroll bars. When I scroll the image I am looking to have the overlaying div’s contents also scroll accordingly. In other words, any item that is interactively created on the top div should behave like it was created on the image directly. It should have a fixed position with respect to the underlying image and scroll as the image is scrolled.

Following is the what I have:

<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>  

I am open to using jquery or any other plugins to achieve this behavior. Any suggestion would be appreciated.

Answer 1

Why not use image as background of div and type any thing in div will be on top of image

try following

<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>