javascript - 在表格中的 div 上叠加图像

Question

问题如何在 td 中覆盖 div？

代码笔 penHere

解释

我在表格中生成随机 map ，这是打印它的函数:

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>")    
        }
}

map 是一个二维随机生成的数组，像这样:

map = [[1,1,1,1,0],
       [1,0,0,0,0],
       [1,0,1,1,1],
       [1,0,0,0,1],
       [1,1,1,0,1]]

这些是关于表格样式和字符图像的 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;
}

任务: Angular 色图像必须生成在带有可行走图 block 的​​ div 上方，而不是下方。

尝试:我试图在 td 上设置 relative，但是字符图像就消失了，我不知道为什么。

错在哪里？任何建议将被认真考虑。

Answer 1

将 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);
};

https://codepen.io/anon/pen/RYKZYq

请注意，Char 确实是 .tile DIV 的第一个子元素。所以你必须使用 .prepend() 而不是 .apend()