Question

问题如何在TD内叠加div？

Codepen penHere

说明

我在表内生成一个随机映射，这是打印它的功能：

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

地图是2d随机生成的数组，如下所示：

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

任务：角色图像必须在带有可移动磁贴的div上方生成，而不是在其下方。

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

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

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

请注意，字符确实是.tile DIV的第一个孩子。因此，您必须使用.prepend（）而不是.apend（）

在表格中的div上覆盖图片

1 个答案: