不能直接对使用position: relative放组件，因为默认为display: table-cell，其定位上下文不明确，子元素position: absolute会相对或表格容器定位而非单元格自身，易导致偏移、遮挡或裁剪；稳妥做法是在内嵌套作为定位容器。

为什么不能直接对 <td> 使用 <code>position: relative 放组件？

可以，但效果常不如预期——因为 <td> 默认是表格布局（<code>display: table-cell），其内部的 position: relative 虽然生效，但子元素用 position: absolute 定位时，参考的是整个表格行（<tr>）或表格容器边界，而非单个单元格可视区域。尤其当单元格内容高度不固定、有 padding 或 border 时，<code>top/left 值容易“漂移”。

• 常见错误现象：div 贴着表格左上角飞出去，或被相邻单元格遮挡
• 根本原因：表格单元格不是“块级定位上下文”，除非显式触发
• 必须确保 <td> 有明确的 <code>position: relative 且无 overflow: hidden 干扰（否则绝对定位元素可能被裁剪）

  <td> 内部加 <code>position: relative 的正确写法

  关键不是加不加，而是加在哪、怎么加。最稳妥的做法是：在 <td> 内包裹一层 <code><div>，并把 <code>position: relative 落在这层 <div> 上，而不是直接写在 <code><td> 标签上。 <pre class="brush:php;toolbar:false;">&lt;td&gt; &lt;div style=&quot;position: relative; width: 100%; height: 100%;&quot;&gt; &lt;span&gt;正常内容&lt;/span&gt; &lt;button style=&quot;position: absolute; top: 4px; right: 4px;&quot;&gt;×&lt;/button&gt; &lt;/div&gt; &lt;/td&gt;</pre> <ul><li><code><td> 本身保持默认样式，避免表格渲染逻辑干扰 <li>包裹 <code><div> 必须设 <code>width: 100% 和 height: 100%，否则相对定位范围可能塌缩为 0

  如果单元格有 padding，绝对定位元素建议用 top: 4px 这类具体值，而非 top: 0，否则会顶到 padding 边界内侧

  兼容性与性能注意点

  所有现代浏览器都支持在表格单元格内嵌套相对/绝对定位，但有两个隐性坑：

  • IE8 及更早版本不支持 position: relative 在 <td> 上正确建立包含块——必须用包裹 <code><div> 方案 <li>大量使用 <code>position: absolute 组件时，若表格开启 table-layout: auto（默认），列宽会因内部绝对定位元素内容而意外重算，建议显式设 table-layout: fixed 并定义 <col> 宽度
  • 滚动表格（overflow-y: auto）中，绝对定位元素不会随单元格滚动——它会固定在视口位置，此时需改用 position: sticky 或 JS 监听滚动

  替代方案：什么时候该放弃相对定位？

  如果目标只是“按钮贴右上角”或“图标居中覆盖”，用 CSS Grid 或 Flex 更轻量、更可控：

  
  使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
  如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
  下载

  <td style="display: grid; align-items: center; justify-content: end; padding: 0;">
    <span>文本</span>
    <button style="grid-column: 1; grid-row: 1;">×</button>
  </td>

  • Grid 方案无需额外包裹层，也不依赖定位上下文，语义清晰
  • Flex 不适用于多元素精确叠加（比如图标+徽标+下拉箭头三者分层），这时还是得回到 relative + absolute
  • React/Vue 等框架里，如果组件需要响应单元格尺寸变化（比如 tooltip 随列宽调整位置），纯 CSS 定位很难动态适配，得结合 getBoundingClientRect() 手动计算

  表格单元格内的定位，本质是借壳造一个局部坐标系。壳建得不牢，里面的东西就容易掉出来——所以别省那一个 <div>。</div>