Question

我正在开发一个Web编程类的项目，目前我们必须使用HTML表来显示游戏中的棋盘。我目前正在开发一款游戏，你可以在游戏中使用二维卡片，当你将它们放在你的电路板上时，它们会开始堆叠。我希望卡片重叠，因为你获得它们但遇到了一些问题。

这是我现在在理论上工作的模型， https://jsfiddle.net/tokyo0709/dewcub0t/

出于任何原因，我现在有一些布局异常，特别是在第二行，我无法弄清楚，认为这只是填充但不一定是真的。此外，我目前通过对每一行使用单独的ID进行重叠，但这看起来有点麻烦，应该有更好的选项。

这是我想要的布局的模型，
HTML：

<body>
    <table>
        <tr id="rowOne">
            <td>
                <img src="https://picoolio.net/images/2015/11/08/overlappingTableImageTest122978.png">
            </td>
            <td>
                <img src="https://picoolio.net/images/2015/11/08/overlappingTableImageTest2cf70f.png">
            </td>
            <td>
                <img src="https://picoolio.net/images/2015/11/08/overlappingTableImageTest380241.png">
            </td>
            <td></td>
            <td>
                <img src="https://picoolio.net/images/2015/11/08/overlappingTableImageTest58bc24.png">
            </td>
        </tr>
        <tr id="overlapOne">
            <td>
                <img src="https://picoolio.net/images/2015/11/08/overlappingTableImageTest122978.png">
            </td>
            <td></td>
            <td>
                <img src="https://picoolio.net/images/2015/11/08/overlappingTableImageTest380241.png">
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr id="overlapTwo">
            <td></td>
            <td></td>
            <td>
                <img src="https://picoolio.net/images/2015/11/08/overlappingTableImageTest380241.png">
            </td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

CSS：

img {
    border: 2px solid black;
}
table {
    /* empty-cells: show; */
    position: relative;
}
td {
    padding: 0;
    height: 224px;
    width: 168px;
}
#overlapOne {
    z-index: 1;
    position: absolute;
    top: 50px;
}
#overlapTwo {
    z-index: 2;
    position: absolute;
    top: 100px;
}

重叠HTML单元格

0 个答案: