Can I Absolutely Position An Element In The Top Right Corner Of A Element?

I have a table and I need the cells to have an element positioned in the upper right corner of each cell. I've read several other questions asking the same thing but none of them s

Solution 1:

The default vertical alignment of a td is centered; so, if you're not worried about the other content in the cell just replace

<td>

with

<td style="vertical-align: top;">

(or add a CSS class to this effect) and your layout will work as intended.

See http://jsfiddle.net/hqtEQ/1/

Solution 2:

Firefox seems to be the only browser that can't absolutely position something directly in the td with position:relative (because of the bug 63895). Other browsers don't have any problems here. And since version 22, Firefox has supported the latest syntax of Flexbox which a) can emulate table behavior, b) doesn't have problems with position: relative. What about using it as a workaround just for Firefox?

td {
    position: relative;
    background: yellow;
}

:-moz-any-link > html, tr {
    display: flex;
    flex-direction: row;
}

:-moz-any-link > html, td {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Fiddle