html - 相对于其父节点的顶部定位按钮

Question

我有一个应该包含图像的表格。显示图像时，我希望控制按钮出现在表格单元格的顶部。

<table id="pridat_fotky">
    <tbody>
        <tr>
            <td class="empty">
                <button>X</button>
            </td>
        </tr>
    </tbody>
</table>

因此，我尝试为表格单元格提供 position:relative 和 position:absolute 按钮:

table#pridat_fotky td {
  position: relative;
}
/**THE BUTTON**/
table td button {
  position: absolute;
  top: 0px;   /*0 means as hight as possible within the cell???*/
  left: 50%;  /**MIDDLE ALIGMENT???*/
}

不幸的是，在这种设置下，按钮会自动对齐到窗口的顶部。这是一个 fiddle , 按钮是一个红色的小方 block 。

Working solution here.

Answer 1

您需要在表格单元格的内容周围添加 block 级元素，如下所示:

<td class="empty">
    <div><button>X</button></div>
</td>

并将以下规则添加到您的 CSS 中:

table#pridat_fotky td div {
    /**TO MAKE THE BUTTON APPEAR RELATIVE?**/
    position: relative;
    height: 100%;
}

position: relative 在表格单元格上无效，但在表格单元格内的 block 级元素上有效。

您还需要设置 height: 100% 以使 div 填满表格单元格，然后放置效果很好。

参见演示:http://jsfiddle.net/audetwebdesign/k9fWN/

注意:您需要将包装器 div 添加到要放置按钮的所有表格单元格。