html - 如何将 Canvas 重叠在 table 上

Question

如何将 Canvas 重叠在表格上，如图所示？黄色部分是 Canvas ，我想在其中插入“乘法”和“等于”等图像。

<canvas id="canvasminus" class="wrapper"></canvas>
<table id="table" align="center" class="wrapper">
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
</table>

canvasminus{
    z-index:1;
    margin:auto;
}

#table {
    z-index: 0;
}

.wrapper
{
    position:relative;    
}

Answer 1

也许是这样的？

td {
  position: relative;
  padding: 1em;
}

canvas {
  position: absolute;
  left: calc(100% - 10px);
  z-index: 10;
}

<table border="collapse">
  <tr>
    <th>Number</th>
    <th>Number</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>
      <canvas id="myCanvas" width="20" height="20" style="border:1px solid #000000;background:red;">
</canvas>
      <div>12</div>
    </td>
    <td>
      <canvas id="myCanvas" width="20" height="20" style="border:1px solid #000000;background:red;">
</canvas>
      <div>12</div>
    </td>
    <td>24</td>
  </tr>
  <tr>
    <td>
      <canvas id="myCanvas" width="20" height="20" style="border:1px solid #000000;background:red;">
</canvas>
      <div>1</div>
    </td>
    <td> <canvas id="myCanvas" width="20" height="20" style="border:1px solid #000000;background:red;">
</canvas>
      <div>2</div>
    </td>
    <td>3</td>
  </tr>
</table>