Issues with CSS relative positioning, adjusted overlay still occupying original image location - CSS

Question

I am trying to eventually do a overlayed image mouseover, and instead of creating double the images to load, I have a masked overlay image for all 9 images.

I will be using "visibility:(hidden or visible)" to show the image on mouseover.

The problem I'm having is that after the "lock" image is adjusted to be on top of the original image, it is still affecting my spacing as if it was never moved.

example here: http://www.pixology.net/ciy/

Code:

<div id="main">&nbsp;<br /><br />
<table width="700" height="700" border="0" align="center" cellpadding="10" cellspacing="2">
  <tr>
    <td><img src="images/main1.png" alt="One" width="214" height="214" /><img src="images/lock.png" alt="lock" class="lockon"/></td>
    <td><img src="images/main2.png" alt="Two" width="214" height="214" /><img src="images/lock.png" alt="lock" class="lockon"/></td>
    <td><img src="images/main3.png" alt="Three" width="214" height="214" /></td>
  </tr>
  <tr>
    <td><img src="images/main4.png" alt="Four" width="214" height="214" /></td>
    <td><img src="images/main5.png" alt="Five" width="214" height="214" /></td>
    <td><img src="images/main6.png" alt="Six" width="214" height="214" /></td>
  </tr>
  <tr>
    <td><img src="images/main7.png" alt="Seven" width="214" height="214" /></td>
    <td><img src="images/main8.png" alt="Eight" width="214" height="214" /></td>
    <td><img src="images/main9.png" alt="Nine" width="214" height="214" /></td>
  </tr>
</table>

</div>

CSS:

#main {
    height:800px;
    width:800px;
    margin: 0px auto;
    background-color:#CCCCCC;
    }

#main .lockon {
    position:relative; 
    top:-214px; 
    visibility:visible;
    }
#main .lockoff {
    position:relative; 
    top:-214px; 
    visibility:hidden;
    }

Answer 1

The problem I'm having is that after the "lock" image is adjusted to be on top of the original image, it is still affecting my spacing as if it was never moved.

That in essence is how position relative works - it reserves space "in flow". If you dont want the space reserved use absolute positioning - or instead of top use a negative margin-top. On top of that using display: hidden simply hides the element - not the space it takes up while display: none will make it as though the element isnt in the DOM at all as far as layout is concerned.

In order to make the absolute positioning origin attached to the contianer element you need to make the container position: relative in this case the container is your td. but im not sure how that will work out so you may want to put both images inside a div within the td. But if youre doing that i would just apply styles to the div istelf and make your images background images on that div using class/id combinations to toggle.