Superimposing a container DIV over its own children

I've got a somewhat complex JavaScript scrolling view implemented, all contained in a DIV. The elements inside have handlers for mouseover and mouseout to control the scrolling behavior, and there are also links inside that can be clicked.

Now, I need a mostly-transparent image which partially (or completely, doesn't matter) covers the scrolling view to be superimposed over everything going on in the scrolling div, while still maintaining the event handling. I thought the easiest way to do this would be if I could somehow wrap the entire DIV in another DIV whose background image is the image to be superimposed, so that events occurring to the superimposed image can be passed down and captured by the child elements. I can't seem to find a way to make the container DIV's background render over its contents though--I know this is totally counter-intuitive and anti-DOM, but I really just want to avoid changing my existing JS c开发者_如何学Goode just to accommodate this extra image, no matter how hackish the solution. It would look something like this:

<div id="superimposed" style="background-image: url('superimposed.png')">
    <div id="scrolling-view"> ... </div>
</div>

I tried various experiments with z-index to no avail. Is this even possible? And if not, do you have any other suggestions?

---

See HTML "overlay" which allows clicks to fall through to elements behind it