position: absolute 在 <td> 中不生效，因 table-cell 不生成定位上下文；须在 <td> 内嵌套 position: relative 的 <div> 作为定位容器，并设 height: 100% 防塌陷。
表格单元格（<td> 或 <th>）默认是 display: table-cell，而 position: absolute 在 table-cell 上**不生效**——这是最常被忽略的根本限制。
为什么 position: absolute 在 <td> 里不起作用
浏览器规范规定：table-cell 元素不能作为绝对定位的“包含块”（containing block），即使你给 <td> 加了 position: relative，它也不会创建定位上下文。实际渲染中，absolute 子元素会向上回溯，跳过整个表格结构，最终相对于最近的非 static 祖先（比如 <body> 或某个外层 <div>）定位。
- 现象：你在
<td>里写position: relative+ 内部div设为position: absolute，结果该div跑到页面左上角或意外偏移 - 原因：表格单元格不是“已定位的容器”，
position: relative对它无效（不触发包含块生成） - 验证方式：用开发者工具检查该
<td>的 computedposition，会显示为static，哪怕你写了relative
正确做法：用 div 包裹内容并设为定位容器
必须在 <td> 内部插入一个块级容器（如 <div>），再对这个 div 应用 position: relative，才能让它成为绝对定位的参考父级。
- HTML 结构必须是：
<td><div class="pos-container"><div class="abs-el">...</div></div></td> - CSS 中：
.pos-container { position: relative; }，.abs-el { position: absolute; top: 0; right: 0; } - 注意：该
<div>需要显式设置height: 100%或min-height: 100%，否则高度塌陷，bottom/top计算可能失准 - 如果
<td>有 padding，absolute元素的top: 0是相对于div内容区起始，不是<td>边框
z-index 和层级覆盖要注意什么
表格行（<tr>）和单元格（<td>）本身有隐式堆叠上下文，直接在 <td> 上设 z-index 无效；只有你创建的那个 position: relative 的 <div> 才能承载 z-index。
立即学习“前端免费学习笔记（深入）”；
- 若想让绝对元素盖住相邻单元格，需确保其父
<div>的z-index高于其他同类容器 - 避免在
<tr>或<table>上盲目加z-index—— 它们不是定位元素，不会创建新层叠上下文 - 常见错误：多个
absolute元素互相遮挡，其实是它们的共同父div没设position: relative，导致都相对于 body 定位，彼此无层级关系
真正起作用的永远是你亲手写的那个 position: relative 的 <div>，而不是 <td> 标签本身。表格结构天生排斥绝对定位，绕不过去，只能包裹。
