负z-index div不显示带有bg颜色的div后面

Question

我对精彩的jquery旋钮进行了扩展，将其转换为度数范围输入。在带有负z-index的div内的旋钮上有一个透明的指南针png图像，因此鼠标点击将与旋钮相互作用而不是img。

现在，当我将旋钮放在没有背景颜色的div中时，罗盘png会显示页面加载的时间。

然而，如果包含div具有背景颜色，则png仅在后显示用户开始标记范围（在紫色圆圈上拖动顺时针范围）。

以下是问题的演示：http://infoxicate.me/testknob.html

编辑：演示页面不再显示问题，因为它已解决......

Answer 1

不要采用负z-指数 - 使其为正数，并使用覆盖它的div，给它一个更大的z指数。

另一种解决方案，如果您担心指针会影响图像而不是旋钮，您可以尝试pointer-events:none。

Answer 2

将以下内容添加到canvas：

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

这是div的图片：

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