如何使absolute定位的divOverlay在Chrome与Edge的td内均正常显示？

我之前也遇到过这种跨浏览器表格定位的小坑，咱们先搞清楚问题出在哪：

absolute定位的元素是相对于最近的非static定位祖先来定位的，而HTML表格里的<td>默认position是static（也就是没有定位上下文）。Chrome可能对表格元素做了隐式的定位上下文处理，但Edge严格遵循标准，所以你的divOverlay会跑到td外面去找更高层的定位元素。

具体修复方案 #

只需要两步就能解决：

1. 给包含absolute元素的td设置定位上下文
   给目标<td>添加position: relative，这样里面的absolute元素就会以这个td为基准定位，不会乱跑。

2. 补上hover显示的逻辑
   按照你的需求，默认隐藏divOverlay，当用户hover表格行时再显示它。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

/* 新增：设置td为定位上下文 */
.position-relative {
  position: relative;
}

/* 新增：默认隐藏overlay，hover行时显示 */
.divOverlay {
  display: none;
  position: absolute;
  top: 0;
  right: 8px; /* 调整右边距，避免按钮贴td边框 */
  padding-top: 5px;
  z-index: 1000;
}

tr:hover .divOverlay {
  display: block;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <!-- 给td添加定位上下文类 -->
    <td class="position-relative">
      <div class="divOverlay">
        <button title="Update" class="btn btn-success btn-xs amenddocbtn" type="button">TARGET</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</body>
</html>

额外说明 #

• 我把原来写在div里的内联样式移到了CSS里，这样更便于维护
• 调整了right的值，让按钮和td边框之间留了点空隙，视觉上更舒服
• 现在这个代码在Chrome和Edge里都会保持按钮在td内部，hover行时正常显示

内容的提问来源于stack exchange，提问作者Xion