HTML 表格單元格背景置頂：CSS 相對定位與負 top 值調整

問題描述

表格中的紅色背景文字想置於單元格頂部，但使用 valign="top" 沒有效果。

解決方法

使用 CSS 相對定位，給背景文字加上負的 top 值，將其視覺上移至單元格頂部。

<style>
td { position: relative; font-size: 12px; }
span.note { position: relative; background: #f00; color: #fff; top: -8px; }
</style>
<table border="1">
  <tr>
    <td align="right">目錄：</td>
    <td>
      <input type="text"/>
      <span class="note">不能為空</span>
    </td>
  </tr>
</table>

說明

• valign 已淘汰，且僅影響單元格內容對齊，不影響子元素背景位置。
• position: relative 搭配 top 可微調元素位置而不影響文件流。