Position a button relatively to the top of its parent node

Question

I have a table that is supposed to contain images. When howering an image, I want a control buttons to appear at the top of the table cell.

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

So, what I tried wa giving the table cell a position:relative and position:absolute for the button:

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???*/
}

Unfortunatelly, with this setup, the button aligns itself to the top of the window. Here is a fiddle, Button is a little red square.

Working solution here.

your fiddle work's great for me. try clearing your browsers cash and refresh the page. — avrahamcool, Sep 28 '13 at 20:49

score 0 · Answer 1 · answered Sep 28 '13 at 20:56

0

There is a syntax error in your CSS. In line 17, you are missing ":", (left 50%;)

answered Sep 28 '13 at 20:56

Robert Sedovsek

1
1

score 0 · Accepted Answer · answered Sep 28 '13 at 22:11

You need to add a block level element around the content of you table cells, something like the following:

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

and add the following rule to your CSS:

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

position: relative is not valid on table cells, but it is valid on a block level element within a table cell.

You also need to set height: 100% to make the div fill up the table cell, and then the placement works nicely.

See demo at: http://jsfiddle.net/audetwebdesign/k9fWN/

Note: You need to add the wrapper div to all the table cells where you want to place the button.

I saw your working demo and the positioning works very nicely. Looks good! — Marc Audet, Sep 28 '13 at 23:09

Position a button relatively to the top of its parent node

Working solution here.

2 Answers2