javascript - 图片的绝对位置

Question

此 JS 代码尝试通过将其 top 和 left 属性设置为从 td 元素的 getBoundingClientRect() 获取的值来定位图像元素 sigImg > 以便图像覆盖 td.signLabel 元素，但页面显示的图像离 td 元素的左侧太远，也离底部太远。

知道为什么以及如何使图像覆盖 td 元素吗？谢谢

let w = window.open();
let doc = w.document;
doc.write(html);
doc.close();

let sigImg = new Image();
sigImg.src = signature;
sigImg.id = 'sign';
sigImg.style.position = 'absolute';

let bounds = doc.querySelector('td.signLabel').getBoundingClientRect();
let top = bounds.top;
let left = bouds.left;

sigImg.style.top = top + 'px';
sigImg.style.left = left + 'px';
sigImg.style.backgroundColor = "yellow"; //for illustration
doc.body.appendChild(sigImg);

<tbody>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>User sign:</td>
    <td class="signLabel">Here:------------------</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</tbody>

Answer 1

将图片放在单元格中，设置为绝对值。

td img {
position: absolute;
  opacity: .2;
}

<table>
  <tbody>
    <tr>
      <td>This is cell</td>
      <td>This is cell</td>
      <td>This is cell</td>
    </tr>      
    <tr>
      <td>This is cell</td>
      <td><img src="http://placekitten.com/g/200/300" /> This is image
</td>
      <td>This is cell</td>
    </tr>      
    <tr>
      <td>This is cell</td>
      <td>This is cell</td>
      <td>This is cell</td>
    </tr>      
  </tbody>
</table>