Why is the "relative" attribute in a div tag making the whole cell adjust in size?

I am trying to have an larger preview image pop up over a smaller thumbnail when I scroll over it by having a hidden <div> be shown. Everything is working perfectly when I have the <div> show up from an absolute position BUT for some reason when I change the positioning to be relative the cell that the thumbnail is contained within is expanding as if the larger preview image within the <div> was actually being shown underneath it on the page.

<td height="" align="center" valign="top" width="" colspan="2">
<a href="services_inventory_sku_details_2.html" onmouseover="javascript:show_div()" onmouseout="javascript:hide_div()"><img src="sku_tshirt.gif" border="0"></a>
<div class="img-shadow" id="RegUser1" style="visibility:hidden; position:absolute; top:50px; left:190px;">
<img src="productPreview.jpg" alt="test"/>
</div>
</td>

Why is this happening when I am just switching where the positioning measurements should be starting from? I have tried a couple options with the display attribute but it doesn't work.