Hovering image over text in td

I am dynamically a开发者_如何学Cdding 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.

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

Just add attribute style with float value to image like this

<img src="..." style="float: right;" />

and add img to begin of your text, and text will wrap around your image better than cover it

following these steps.

1. make it absolute positioned , so that it will out of document flow
2. Give top , left values so that it will stay exactly whereever you want

3. you can use jquery offset also to get the value of the parent element and use that top and left property's

   http://api.jquery.com/offset/