如何使用CSS在带背景的表格中定位文本且不偏移原有内容

需要实现点唱机曲目条的打印功能，目前已完成可展示、打印曲目条的HTML页面开发。点唱机选曲按键标识为ABCDEFGHJK与1234567890的组合，为方便裁切后准确插入对应卡槽，需要在卡片角落打印对应位置编号，该编号插入卡槽后会被遮挡，不影响正常显示。

当前添加编号时会导致曲目条原有文本偏移，尝试position: absolute、position: relative等定位写法均未达到预期效果。

现有代码如下：

<!doctype html>
<html>

<head>
  <style type="text/css">
    .card {
      width: 3in;
      height: 1in;
      background-size: 3in 1in;
    }
    
    .line {
      width: 3in;
      height: 7mm;
      text-align: center;
      font-family: Georgia, serif;
    }
    
    .cardnumber {
      font-size: 5px;
      top: auto;
      z-index: 100;
    }
  </style>
</head>

<body>

  <table cellspacing="0" cellpadding="0">
    <tr>

      <td class="card">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td class="line">Let It Be</td>
          </tr>
          <tr>
            <td class="line">Beatles</td>
          </tr>
          <tr>
            <td class="line">Yellow Submarine</td>
          </tr>
        </table>
        <div class="cardnumber">H1<br>H2</div>
      </td>

      <td class="card">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <div class="cardnumber">J7<br>J8</div>
            <td class="line">Bad</td>
          </tr>
          <tr>
            <td class="line">Michael Jackson</td>
          </tr>
          <tr>
            <td class="line">Liberian Girl</td>
          </tr>
        </table>
      </td>

    </tr>
  </table>

</body>

</html>

定位失效、文本偏移的核心原因有两点：

• 使用position: absolute做绝对定位时，未给父容器.card设置position: relative作为定位锚点，导致编号元素定位基准错乱，干扰正常文档流
• 第二张卡片的编号div直接嵌套在tr标签内部，不符合HTML表格的元素嵌套规则，浏览器自动修正DOM结构时引发布局错位

按以下步骤调整即可：

1. 给.card类添加position: relative，作为内部绝对定位元素的定位基准
2. 给.cardnumber设置position: absolute，通过top/left/right/bottom属性固定到卡片指定角落，脱离普通文档流就不会挤压原有文本
3. 将所有编号元素从表格内部移到.card容器下、与内层曲目表格同级的位置，避免破坏表格布局结构

调整后的完整代码：

<!doctype html>
<html>

<head>
  <style type="text/css">
    .card {
      width: 3in;
      height: 1in;
      background-size: 3in 1in;
      /* 设为相对定位，作为内部绝对定位元素的锚点 */
      position: relative;
    }
    
    .line {
      width: 3in;
      height: 7mm;
      text-align: center;
      font-family: Georgia, serif;
    }
    
    .cardnumber {
      font-size: 5px;
      z-index: 100;
      /* 绝对定位固定到卡片角落，不占普通文档流位置 */
      position: absolute;
      top: 1mm;
      left: 1mm;
      /* 如需放到右上角，替换为 right: 1mm; left: auto; 即可 */
    }
  </style>
</head>

<body>

  <table cellspacing="0" cellpadding="0">
    <tr>

      <td class="card">
        <!-- 编号放在内层表格外部，不破坏表格布局 -->
        <div class="cardnumber">H1<br>H2</div>
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td class="line">Let It Be</td>
          </tr>
          <tr>
            <td class="line">Beatles</td>
          </tr>
          <tr>
            <td class="line">Yellow Submarine</td>
          </tr>
        </table>
      </td>

      <td class="card">
        <div class="cardnumber">J7<br>J8</div>
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td class="line">Bad</td>
          </tr>
          <tr>
            <td class="line">Michael Jackson</td>
          </tr>
          <tr>
            <td class="line">Liberian Girl</td>
          </tr>
        </table>
      </td>

    </tr>
  </table>

</body>

</html>

调整后编号会固定在卡片设定的角落位置，完全不会偏移原有曲目文本，打印裁切后插入卡槽时，角落编号会被卡槽边缘遮挡，满足使用需求。

内容的提问来源于stack exchange，提问作者Frank Bemelman