I am trying to display control buttons at the top of a table cell when hovering over an image within the cell. Here is the HTML structure I have:
<table id="pridat_fotky">
<tbody>
<tr>
<td class="empty">
<button>X</button>
</td>
</tr>
</tbody>
</table>
To achieve this, I attempted using position:relative for the table cell and position:absolute for the button like so:
table#pridat_fotky td {
position: relative;
}
/**THE BUTTON**/
table td button {
position: absolute;
top: 0px;
left: 50%;
}
However, the button ended up aligning itself to the top of the window instead of the cell. You can see a proof of this in the following fiddle, where the button appears as a red square.