不能直接当定位父容器，因其默认position为static且display:table-cell不支持relative语义；即使显式设置position:relative，在IE11及旧引擎中仍失效，且易受外层transform/filter或祖先定位样式干扰；同时自动创建独立层叠上下文，导致z-index跨单元格无效。
因为 <td> 默认不是定位上下文，<code>position: absolute 元素会跳过它，向上寻找最近的 position: relative/absolute/fixed/sticky 祖先——没找到就落到视口左上角。
为什么 <td> 不能直接当定位父容器？
<p><code><td> 的默认 <code>position 是 static，不构成「已定位祖先」。即使你给它加了 position: relative，也存在兼容性陷阱：IE11 及更早版本完全忽略该声明，子元素仍回退到 - 现代浏览器（Chrome/Firefox/Safari ≥ 2022）支持
<td style="position: relative">，但必须显式写，不能依赖 <code>display: table-cell 自带行为
-
display: table-cell 元素本身不支持 position: relative 的规范语义，部分旧版渲染引擎会静默降级
- 如果父
<tr> 或外层 <code><div> 意外设置了 <code>position: relative，绝对定位元素会以它为参考，而非你预期的 <td>
<h3>为什么加了 <code>position: relative 还是飘走？
<td style="position: relative">，但必须显式写，不能依赖 <code>display: table-cell 自带行为
display: table-cell 元素本身不支持 position: relative 的规范语义，部分旧版渲染引擎会静默降级<tr> 或外层 <code><div> 意外设置了 <code>position: relative，绝对定位元素会以它为参考，而非你预期的 <td>
<h3>为什么加了 <code>position: relative 还是飘走？常见干扰源比你想象中更隐蔽。用开发者工具检查「Computed」面板里的 Containing block，往往发现真正生效的是某个被遗忘的外层容器，比如：
-
<form></form>标签被全局样式设了position: relative -
.table-wrapper类在 UI 框架里默认启用定位（如 Ant Design 的Table外层容器） - 某个祖先节点用了
transform或filter，意外创建了新的包含块，覆盖了<td> 的 <code>relative此时即使
<td> 有 <code>position: relative，也不会被选为定位上下文。立即学习“前端免费学习笔记（深入）”；
表格里
z-index为什么总不生效？每个
<td> 和 <code><tr> 都会自动创建独立的层叠上下文（stacking context），哪怕没写 <code>z-index。这意味着：<td> 内的绝对定位元素，其 <code>z-index只在本单元格内有效- 右边
<td> 里的 badge 永远盖不过左边 <code><td> 里普通文字，调再大也没用 <li>无法靠 <code>z-index让一个单元格的内容“浮”到另一个单元格上方
实际能用的补救方案
别强求
<td> 做万能锚点。真要加徽章、气泡、覆盖层，优先考虑这些路径： <ul><li>给 <code><td> 包一层 <code><div style="position: relative">，把绝对定位元素放进去——结构略臃肿但兼容性稳 <li>用 <code>top: 0; left: 0; width: 100%; height: 100%铺满单元格，再靠transform微调位置，避免依赖right/bottom计算 - 放弃绝对定位，改用
display: flex+justify-content: flex-end+align-items: flex-start实现右上角徽章，不脱离文档流 - 打印场景下必须禁用绝对定位：用
@media print { .badge { position: static !important; top: auto; right: auto; } }，否则内容大概率丢失
最常被忽略的一点：表格单元格高度塌陷时，height: 100% 对绝对定位子元素无效——它没有可继承的高度来源，得靠显式设置 <td> 高度或用 <code>min-height 卡住底线。
