错综复杂的Div / Canvas放置

Question

简介：

我一直在学习Javascript / CSS / HTML，只是从互联网上阅读内容，而且我很难获得更广阔的视角，了解如何实现我想要学习的方式。我正在尝试制作网络浏览器游戏。

终极目标：

创建角色设备屏幕（其布局类似于下图）和角色包屏幕。我希望能够点击包中的一个项目并将其拖放到角色设备屏幕上所属的插槽上（不必拖放，但会很好。）这个包有10个不同的插槽，每个都包含一个不同的项目，我只想一次移动一个项目。

我尝试了什么：

为包创建四个div。一个包含其他三个，一个包含在顶部绘制文本“bag”的画布，另一个包含5个canvas元素（包中的每个插槽）。我这样做，以便我可以实现“ onclick“为每个画布，以便我可以抓住包里的单个项目。

角色设备屏幕似乎太复杂，无法使用div进行排列。设备插槽没有以良好的行和列方式排列。我希望每个设备插槽（看起来像方块的东西）都可以单独点击。我尝试过浮动元素并以不同方式使用边距，但它无法正常工作。我可以使用一个画布绘制整个角色设备屏幕，但是当用户点击屏幕时，如何判断画布的哪个部分被选中？

评论：

有没有办法确定点击时用户点击的元素的哪个部分？有没有比我错过的div更好的东西？它也可以帮助，如果有可能使div中的孩子不能强迫父div超过我指定的宽度或高度（有时孩子增加父母的大小，有时它不会。）当我将子项添加到div中，它们似乎总是添加到最后一个元素的右侧，而不是最后一个元素的下方，即使使用float也是如此。

下图中的“角色”屏幕是从单个画布中绘制的。我想在div（或其他方式）中以相同的方式安排多个小画布（每个设备插槽一个）。**编辑

Answer 1

我相信我可以使用绝对定位在设备屏幕内实现设备插槽画布的正确定位，之前没有发生过。