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， Button 是一个红色的小方块。

工作解决方案在这里。

Answer 1

您的 CSS 中存在语法错误。在第 17 行，您缺少“：”，（剩下 50%；）

Answer 2

您需要在表格单元格的内容周围添加一个块级元素，如下所示：

<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在表格单元格上无效，但在表格单元格内的块级元素上有效。

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

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

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