Negative z-indexed div not showing behind a div with a bg-color

Question

I have an extension to the wonderful jquery knob, which turns it into a degree range input. There's a transparent compass png image positioned on the knob within a div with a negative z-index, so mouse clicks will interact with the knob rather with the img.

Now, when I put the knob in a div without a background color, the compass png shows when the page loads.

However, if the containing div has a background color, the png shows only after the user starts marking the range (drag a clockwise range on the purple circle).

Here's a demonstration of the problem: http://infoxicate.me/testknob.html

Edit: The demo page doesn't demonstrate the problem anymore, since it is solved...

Answer 1

Do not take a negative z-index - make it positive and the div that covers it, give it a bigger z-index.

Another solution, if you worry that the pointer would affect the image and not the knob you could try pointer-events:none.

Answer 2

Put the following to your canvas:

canvas {
    position: relative;
    z-index: 2;
}

And this to the div with the image:

div{
    position: absolute;
    z-index: 1;
}