Javascript 将图像覆盖在表中的div上

问题 如何在td中覆盖div

Codepen

解释

我在表中生成一个随机映射，这是打印它的函数：

function mapGenerate(map){

        //loop the 2d array map and change the number with the appropriate img    
        for(var i = 0; i < map.length; i++) {
            var innerArrayLength = map[i].length;
            for(var j = 0; j<innerArrayLength; j++){
                if(map[i][j] === 0){
                    map[i][j]="<div class=\"tile\"><img class=\"walkable\" src=\"https://image.ibb.co/bGanFz/floor_Resized.png\"></div>";
                }else{
                    map[i][j]="<img class=\"nonWalkable\" src=\"https://image.ibb.co/m9s1az/volcanoresize.png\">";
                }    
                ;
            }
            $("#tableGame").append("<tr><td>"+ map[i].join('</td><td>') + "</td></tr>")    
        }
}

这些是关于表格样式和字符图像的Css：

table {
  background-color: black;
  border-collapse: collapse;
  border: 2px solid white;
  box-shadow: 1px 1px 30px white;
}
tr {
  border: 0px;
  padding: 0px;
  margin:0px;
}    
td {
  border: 0px;
  padding: 0px;
  margin:0px;
}    
#tableGame .td {
  position: relative;
}    
.char {
  z-index: 1000;
}    
#tableGame .char {
  position: absolute;
}

任务：角色图像必须在具有可行走磁贴的div上生成，而不是在此下方

尝试： 我试着在td上设置relative，但是char图像消失了，我不知道为什么

---

错误在哪里？如有任何建议，将不胜感激

将Char添加到.tile DIV而不是td应该可以做到：

function place(coord, char){
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);
  var tile = $($(".tile", row)[0]);
  tile.prepend(charImage);
};

功能位置（坐标、字符）{
var charImage=$（“

请注意，Char确实是.tile DIV的第一个子元素。因此，您必须使用.prepend（）而不是.apend（）
谢谢您的帮助，我不敢相信它如此“简单”，我对css非常着迷。因此，请理解：在td中重叠某些内容的更好方法是使用DIV（具有正确的css位置）在这里面，如果你把两个元素放在一个td中，html流将显示两个相邻的元素。
function place(coord, char){
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);
  var tile = $($(".tile", row)[0]);
  tile.prepend(charImage);
};