html - 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

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.

这本质上就是相对位置的工作原理——它“在流中”保留空间。如果您不想保留空间，请使用绝对定位 - 或者使用负 margin-top 代替 top。最重要的是，使用 display: hidden 只是隐藏元素 - 而不是它占用的空间，而 display: none 会让人觉得元素根本不在 DOM 中就布局而言。

为了使绝对定位原点附加到 contianer 元素，您需要使容器 position: relative 在这种情况下容器是您的 td。但我不确定结果如何，因此您可能希望将两个图像都放在 td 内的 div 中。但如果你这样做，我只会将样式应用于 div istelf，并使用类/id 组合来切换你的图像背景图像在 div 上。