负 z-indexed div 未显示在具有 bg-color 的 div 后面答案

【问题标题】：Negative z-indexed div not showing behind a div with a bg-color负 z-indexed div 未显示在具有 bg-color 的 div 后面
【发布时间】：2013-03-04 11:44:13
【问题描述】：

我有一个很棒的 jquery 旋钮的扩展，它将它变成一个度数范围输入。在带有负 z-index 的 div 内的旋钮上放置了一个透明的罗盘 png 图像，因此鼠标点击将与旋钮交互，而不是与 img 交互。

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

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

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

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

【问题讨论】：

为什么有 z-index 属性？你的问题本质上是，“为什么我可以看到窗户后面的盒子，但看不到门。” Z-Index 将其置于其他元素之后。你可以透过透明的背景看到，比如窗户。现在，我不确定为什么单击它时它会出现在上面，但它可能与 JavaScript 有关。也许触发将轮子设置为 0 角度的功能就足够了？
我尝试了触发几个功能，但都没有成功。

标签： css z-index background-color jquery-knob

【解决方案1】：

不要采用负 z-index - 将其设为正数，覆盖它的 div 将其设为更大的 z-index。

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

【讨论】：

我试过了，还是不行。旋钮包含在
奇怪的是，如果我试图摆脱那个负 z-index，它对我来说就很好。另一种解决方案，如果您担心指针会影响图像而不是旋钮，您可以尝试 pointer-events:none。

【解决方案2】：

将以下内容发送到您的canvas：

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

还有这个给div的图片：

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

【讨论】：

这有点用但不完全。现在我确实看到了图像，但是它是在白色背景上看到的，而它应该是在灰色背景上（或任何 RGB 设置）。我假设 z-index 高于具有 bg-color 的 div 的画布堆叠在前面，并且它有一个白色的 bg，我似乎无法覆盖。
您在哪个浏览器中看到白色背景？我使用了firefox并用firebug更改了css，它工作正常。我没有在其他浏览器中测试它，但它应该可以正常工作。
在 Chrome 上测试。无论如何，这不是一个理想的解决方案，因为画布是由 jquery 旋钮绘制的，我不想在那里修改任何东西。