绝对定位元素放入表格会脱离表格格式化上下文，不参与布局计算；必须给目标<td>设position: relative才能使其成为包含块，否则元素将回退至视口定位，且各单元格拥有独立层叠上下文，z-index不跨单元格生效。
绝对定位元素放进 <table> 里会破坏表格结构
绝对定位元素不能作为 <tr>、<td> 或 <th> 的合法子元素参与表格布局计算。一旦给表格单元格内的元素设 position: absolute，它就彻底脱离表格格式化上下文（table formatting context），不再受 table-layout、列宽分配、行高对齐等规则约束。
常见错误现象：在 <td> 里放一个 div 并设 position: absolute，结果该 div 悬浮在表格左上角，或完全跑出单元格边界，且单元格自身高度塌陷——因为绝对定位元素不贡献内容高度，<td> 无法感知它的存在。
- 表格单元格（
<td>）默认是position: static，不是“已定位祖先”，所以绝对定位元素会向上找最近的已定位祖先；没找到就回退到初始包含块（视口） - 想让绝对定位元素“锚定在某个单元格内”，必须先给该
<td>加position: relative -
display: table-cell元素本身不支持position: relative，所以不能用 div 模拟表格再套绝对定位——必须用真实<td>并显式设置position: relative
position: relative 在 <td> 上是否生效？
可以，但有兼容性陷阱。现代浏览器（Chrome/Firefox/Safari ≥ 2022）支持给 <td> 设置 position: relative，使其成为绝对定位元素的包含块。但 IE11 及更早版本不支持，会忽略该声明，导致子元素回退到视口定位。
使用场景：需要在表格某单元格右上角加一个状态徽章（badge），又不想影响表格原有行列结构。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<td style="position: relative;"> 内容 <span class="badge" style="position: absolute; top: 4px; right: 4px;">NEW</span> </td>
- 不要依赖
display: table-cell+position: relative的组合，它在多数浏览器中无效 - 如果需兼容 IE11，得在外层包一层
<div style="position: relative;">，再把<span>放进去——但这会让 HTML 结构变臃肿
表格内部用绝对定位做“覆盖层”时的 z-index 问题
z-index 在表格中行为特殊：表格行（<tr>）和单元格（<td>）会创建独立的层叠上下文（stacking context），即使没设 z-index。这意味着，一个放在 <td> 里的绝对定位元素，其 z-index 只在该单元格内有效，无法盖过隔壁 <td> 里的内容。
常见错误现象：给两列都加了 badge，右边 badge 却被左边单元格的内容遮住，调大 z-index 也没用。
- 根本原因：每个
<td>是独立层叠上下文，z-index不跨单元格比较 - 解决办法只有两个：要么把覆盖层提到
<table>外层统一管理，要么改用transform: translate()配合position: relative模拟“伪绝对定位”（不触发新层叠上下文） - 注意：
transform会触发硬件加速，在低性能设备上可能比position: absolute更卡
为什么不用绝对定位替代表格布局？
因为绝对定位完全放弃表格的自适应能力：列宽不再随内容伸缩，行高不会被单元格内容撑开，响应式断点失效，屏幕阅读器无法识别语义化表格结构。
真正需要的是“视觉上像表格，但底层用 CSS Grid 或 Flexbox 实现”，而不是把 position: absolute 塞进 <table> 标签里硬凑效果。
- 表格语义不可丢：数据表格必须用
<table>，辅助技术依赖它解析行列关系 - 纯展示型“表格样式”布局，优先选
display: grid+grid-template-columns，再用position: absolute叠加装饰元素 - 最易被忽略的一点：绝对定位元素的
left/top值是相对于包含块左上角，而表格单元格的 padding 和 border 会影响这个原点位置——调试时务必检查box-sizing和边框是否计入尺寸
