CSS相对定位问题，调整覆盖仍然占据原始图像位置 - CSS

Question

我想最终做一个覆盖图像鼠标悬停，而不是创建双图像加载，我有一个蒙面覆盖图像为所有9个图像。

我将使用“可见性:(隐藏或可见）”在鼠标悬停上显示图像。

我遇到的问题是在将“锁定”图像调整为位于原始图像顶部之后，它仍然影响我的间距，就好像它从未移动过一样。

例如这里：http://www.pixology.net/ciy/

代码：

<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

我遇到的问题是， 后 “锁定” 图像调整到置于 顶部的原始图像，它仍然是 影响我的间距好像它是 从未移动过。

这实质上是位置相对作用的方式 - 它在“流动”中保留空间。如果您不希望保留空间，请使用绝对定位 - 或者不要使用负数margin-top。除此之外，使用display: hidden只是简单地隐藏了元素 - 而不是它占用的空间，而display: none将使它看起来好像DOM中的元素根本不在布局方面。

为了使绝对定位原点附加到contianer元素上，您需要将容器position: relative设置为容器td。但我不知道如何解决这个问题，所以你可能想把这两个图像放在td内的div。但如果你这样做，我只会将样式应用到div istelf，并使用类/ ID组合来切换div上的图像背景图像。