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

Why do you have the z-index property? You question is essentially, "Why can I see a box behind a window, but not a door." Z-Index puts it behind other elements. You can just see through transparent backgrounds, like a window. Now, I'm not sure exactly why it comes above when you click it, but it probably has to do with the JavaScript. Perhaps triggering the function that sets the wheel with an angle of 0 would suffice? — Brigand, Mar 04 '13 at 11:55

Dan Ovidiu Boncut · Accepted Answer · 2013-03-05T08:48:48.110

5

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.

edited Mar 05 '13 at 08:48

answered Mar 04 '13 at 11:49

Dan Ovidiu Boncut

3,083
4
25
45

I tried, but it doesn't work. The knob is contained within a – shaharsol Mar 04 '13 at 12:35
the strange thing is that if i try to get out that negative z-index it goes just fine for me. Another solution, if you worry that the pointer would affect the image and not the knob you could try pointer-events:none. – Dan Ovidiu Boncut Mar 04 '13 at 13:44

score 2 · Answer 2 · answered Mar 04 '13 at 13:32

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

answered Mar 04 '13 at 13:32

otinanai

3,987
3
25
43

This kinda works but not fully. Now I do see the image, however it's seen on a white background, whereas it should be on a grey background (or whatever the RGB is set to). I assume the canvas with a z-index higher than the div with the bg-color is stacked in front and it has a white bg, which I don't seem to be able to override. – shaharsol Mar 04 '13 at 16:07
in which browser do you see the white background? I used firefox and changed the css with firebug and it was working fine. I didn't test it in other browsers but it should work fine. – otinanai Mar 04 '13 at 16:17
tested on Chrome. anyway, that's not a desired solution since the canvas is painted by the jquery knob and I don't want to modify anything there. – shaharsol Mar 04 '13 at 21:24

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

2 Answers2