【html5】複数のキャンパスを重ねて、レイヤーにする。クリックイベントはz-indexが一番大きいキャンパスで発生。

【トップ】【じんじんのいろいろ日記】【カテゴリーサイトマップ】

スポンサードリンク

【じんじん】
2024年12月8日
5時35分46秒

複数のキャンパスを重ねて、レイヤーにする。クリックイベントはz-indexが一番大きいキャンパスで発生。
<style type="text/css">
#parent {
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#id_canvas2 {
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#id_canvas3 {
position:absolute;
top: 0px;
left: 0px;
z-index: 3;
}
#id_canvas4 {
position:absolute;
top: 0px;
left: 0px;
z-index: 4;
}
#id_canvas5 {
position:absolute;
top: 0px;
left: 0px;
z-index: 5;
}
div{
position: relative;
height: 600px;
}
</style>

<div id="click_erea">
<canvas id="parent" width="400"height="600"></canvas>
<canvas id="id_canvas2" width="400"height="600"></canvas>
<canvas id="id_canvas3" width="400"height="600"></canvas>
<canvas id="id_canvas4" width="400"height="600"></canvas>
<canvas id="id_canvas5" width="400"height="600"></canvas>
</div>