Question

I am dynamically adding an icon to a table cell on hover with jQuery. How can I make this image display on the right-hand side of the cell, overlapping the td contents if necessary?

I’ve googled for a good hour to no avail.

I don’t need help with the jQuery, mainly the styling.

Answer 1

Make the <img/> positioned absolutely while having the <td/> position set to relative.

td{
    position:relative;
}
td img{
    position:absolute;
    top:0;
    right:0;
}

Example on jsfiddle

Edit

This won’t work in firefox as <td/> cant have position relative.
Wrap the contents of the <td/> in a <div/> and it should work as intended.

<td>
    <div>
        Some text
        <img src="http://placekitten.com/50/50"/>
    </div>
</td>


td div{
    position:relative;
}
td img{
    position:absolute;
    top:0;
    right:0;
}

Example