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

Question

我对美妙的 jquery 旋钮进行了扩展，将其转换为度数范围输入。在具有负 z-index 的 div 内的旋钮上放置了一个透明的罗盘 png 图像，因此鼠标单击将与旋钮交互，而不是与 img 交互。

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

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

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

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

score 5 · Accepted Answer

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

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

score 2 · Accepted Answer

将以下内容放入您的canvas:

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

这div与图像：

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

2 回答 2