表格单元格不是绝对定位的天然包含块，应在td/th内用position: relative的容器包裹绝对定位元素，避免定位错乱和渲染异常，并注意box-sizing与padding影响。
表格（table）本身不是 position: relative 的天然包含块，直接对 td 或 th 内的元素设 position: absolute，会导致定位参考错乱——它可能向上逐层找最近的已定位祖先，最终脱出表格结构，出现“飞走”或偏移现象。
用相对定位容器包裹绝对元素
在 td 内部加一层 div（或其他块级元素），并设 position: relative。这样，其内部的 absolute 元素就以该 div 为定位上下文，不会影响表格布局，也能精准控制位置。
- HTML 示例：
<td><div class="cell-wrapper"><span class="badge">New</span></div></td> - CSS 示例：
.cell-wrapper { position: relative; }
.badge { position: absolute; top: 4px; right: 4px; }
避免给 td/th 直接设 position: relative
虽然可行，但部分浏览器（尤其旧版）对表格单元格应用 position: relative 可能引发渲染异常，比如高度塌陷、边框错位或滚动异常。标准做法是保持 td 默认定位，只在内容层封装相对容器。
注意表格单元格的 box-sizing 和 padding
绝对定位元素的 top/right/bottom/left 是从容器的 content box 边缘 开始计算的。如果 .cell-wrapper 有 padding，又没设 box-sizing: border-box，实际可用空间会变小，导致定位偏差。
立即学习“前端免费学习笔记（深入）”；
- 建议统一加：
.cell-wrapper { box-sizing: border-box; } - 若需居中 badge 类元素，可用
transform: translate(-50%, -50%)配合left: 50%; top: 50%，比依赖 padding 更可靠。
替代方案：用 CSS Grid 模拟表格（进阶推荐）
如业务允许且兼容性可控（现代浏览器为主），可放弃原生 table，改用 display: grid + 语义化标签（如 article / section）。Grid 容器天然支持子项绝对定位，且结构更灵活、样式更可控，彻底规避表格定位陷阱。
基本上就这些。核心就一条：别让 absolute 元素直面 table 单元格，中间垫个 relative 的“缓冲层”，稳。
