Javascript 画布和DOM分层

我正在使用melonJS引擎制作一个HTML5游戏。。。它使用画布导入并使用平铺的TMX贴图

我使用DOM元素创建了一个拼图，我发现它比在平铺地图编辑器中制作拼图容易得多。melonJS帮助我绘制画布和动画的播放器实体类需要能够在弹出的谜题中导航

不幸的是，DOM与玩家精灵重叠，因为拼图与DOM分开

要解决此问题，请执行以下操作：

我想我可以调整玩家的z-指数，使其超过DOM谜题。。。但它仍然是重叠的。这里，player.z索引和puzzle z索引显示z索引并不重要，因为它们位于完全不同的层上。。。否则，玩家的36将明显地与谜题的0重叠：

我想我可以添加一个辅助画布，并且：

-在游戏画布上临时删除/隐藏玩家的精灵游戏。PlayerEntity

-将新的玩家精灵添加到顶层画布

-给那个玩家精神集中/控制-又名。将关键点绑定到新玩家对象

但这似乎是很多不必要的工作

我的意思是：

---

有没有办法画一个画布元素，这样我就可以看到播放器精灵了？

我们需要看到你的HTML和CSS。你能现场复制吗？@Shomz有太多事情在进行，所以我很难复制它。因此，我一直在寻找更高层次的策略。我100%确信这可以用简单的CSS解决，尽量不要使它过于复杂。我只需要基本的标记和CSS，不需要重新创建任何游戏元素。。。空白画布，没有图像，等等。我只需要看看你是如何构造它的。你在画布上画什么并不重要，它只是一个覆盖另一个的DOM元素。用你的小提琴似乎很好。哦，等等，当拼图元素覆盖画布的其余部分时，您希望红色方块出现在拼图元素上方吗？这是不可能的，你需要另一张画布。你可以简单地把玩家画在上面的画布上，而不是主画布上，然后问题就解决了。只需修改您的播放器绘制函数，以便您可以在备用画布/上下文中传递。

var player = me.game.world.getChildByName("mainPlayer")[0];
log(player.z);  //logs 36
log($("#puzzle").css("z-index"));  //logs 0