这被大大简化了，但这基本上就是我所拥有的:
<html>
<body>
<div id="div1" style="width: 581px; height: 643px;">
<div id="div2" style="position: relative; width: 581px; height: 643px; background-image: url("bg.jpg"); background-size: 100% 100%;">
<div id="div3" style="position: absolute; width: 581px; height: 643px;">
<canvas id="canvas1" width="640" height="960" style="z-index: 0; width: 428.667px; height: 643px; transform: translateX(76.1667px) translateY(0px);"></canvas>
</div>
<div id="div4" style="position: absolute; width: 581px; height: 643px;">
<canvas id="canvas2" width="640" height="960" style="z-index: 1; width: 428.667px; height: 643px; transform: translateX(76.1667px) translateY(0px);"></canvas>
</div>
</div>
</div>
</body>
</html>
元素“div3”和“div4”位于同一位置 - 但是，“canvas2”的内容始终显示在“canvas1”上方。我已经尝试设置 div3 和 div4 的 z-index，但到目前为止无济于事。
这里会发生什么？
谢谢
最佳答案
var canvas1 = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");
ctx1.font = "30px Arial";
ctx1.textAlign = "left";
ctx1.fillText("canvas 1",canvas1.width/2, canvas1.height/2);
var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
ctx2.font = "30px Arial";
ctx2.textAlign = "right";
ctx2.fillText("canvas 2",canvas2.width/2, canvas2.height/2+60);#div2{
position: relative;
width: 581px;
height: 643px;
background-color: rgba(255, 0,0,0.5);
background-size: 100% 100%;
}
#div3{
position: absolute;
width: 581px;
height: 643px;;
}
#div4{
position: absolute;
width: 581px;
height: 643px;
}
#canvas1{
background-color: rgba(0,0,255,0.5);
z-index: 1;
width: 428.667px;
height: 643px;
transform: translateX(76.1667px) translateY(0px);
}
#canvas2{
background-color: rgba(0,255,0,0.5);
z-index: 0;
width: 428.667px;
height: 643px;
transform: translateX(76.1667px) translateY(0px);
}<div id="div1" style="width: 581px; height: 643px;">
<div id="div2">
<div id="div4">
<canvas id="canvas2" width="640" height="960"></canvas>
</div>
<div id="div3">
<canvas id="canvas1" width="640" height="960"></canvas>
</div>
</div>
</div>对于任何访问者，我已经制作了解决方案的 jsFiddle。
只需验证所有相关样式信息都在 CSS 中，并且 Canvas 在 HTML 中按照您希望它们显示的顺序声明(或者使用 CSS 来解决这个问题，您自己选择)。
关于javascript - 堆叠两个 div，每个 div 都有一个 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38752502/