私はファブリックjs APIを使用しています。このページには2つのキャンバスがあります。私がそれらの両方を表示すると、すべてが良いです。しかし、一度に表示するのは1つだけです。したがって、私は表示領域が同じになるように絶対位置を使用しています。私が直面している問題は、最初のキャンバスがロードされ、2番目のキャンバスをロードすると、何とか最初にロードされたキャンバスのZ-インデックスが高くなるということです。なぜなら、私は2番目のキャンバスに配置された要素を選択することができないからです。キャンバスzindex問題
あなたは、いくつかの異なる方法で、いずれかのインラインスタイルによって、HTMLタグやスタイルシートを介したキャンバスのCSS z-index値を定義することができます - z-index値のみposition値とどこそれを持つ要素に動作しますが、CSS値はstaticに設定されていません。
互いの上に直接HTMLページ要素を積層する場合、それは例えば、コンテナ要素内の場所にそれらをすると便利な場合があります...
<div id="canvas-container">
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
</div>
子要素は、そのからz-index値を継承することを念頭に置き、両親は、それゆえ、彼らは明示的な宣言を必要とし、この配置はそうのようなスタイルシートのエントリを持つスタイルがあります...
#canvas-container {
position:relative;
z-index:100;
}
/* canvas position */
#canvas1, #canvas2 {
position:absolute;
top:0;
left:0;
}
/* canvas z-index */
#canvas1 {
z-index:200;
}
#canvas2 {
z-index:300;
}
これは、よう#canvas2下#canvas1を配置しますz-indexの値を持つ重複要素は、より高い値を持つ要素の下に配置されます。すべての3つの要素の
CSSの幅と高さの値は、ページのレイアウトを維持するために同じ値に設定することができます...
#canvas-container, #canvas1, #canvas2 {
width:???px;
height:???px;
}
同様のCSSプロパティと値は、HTMLタグに追加することができますthe html style attribute、またはadded dynamically via JavaScriptで直接送信します。