css - 背景色の div の背後に負の z インデックス付き div が表示されない

Question

素晴らしいjqueryノブの拡張機能があり、それを度範囲入力に変換します。負の z インデックスを持つ div 内のノブに配置された透明なコンパス png 画像があるため、マウス クリックは画像​​ではなくノブと相互作用します。

ここで、背景色のない div にノブを配置すると、ページが読み込まれたときにコンパス png が表示されます。

ただし、含まれている div に背景色がある場合、png は、ユーザーが範囲のマーキングを開始した後にのみ表示されます (紫色の円で時計回りの範囲をドラッグします)。

ここに問題のデモがあります: http://infoxicate.me/testknob.html

編集：デモページは解決されたため、問題を示していません...

Answer 1

負の z-index を取らないでください - それを正にし、それをカバーする div に大きな z-index を与えてください。

別の解決策として、ポインターがノブではなくイメージに影響するのではないかと心配している場合は、試してみてくださいpointer-events:none。

Answer 2

あなたのに以下を入れてくださいcanvas：

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

そして、これをdiv画像とともに：

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