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

我试图最终做一个覆盖图像鼠标覆盖，而不是创建两倍的图像加载，我有一个蒙面覆盖图像为所有9个图像

我将使用“可见性：（隐藏或可见）”在鼠标上方显示图像

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

示例如下：

代码：

我现在的问题是 将“锁定”图像调整为打开 在原始图像的顶部，它仍然是 影响我的间距，好像是 从未动过

这本质上就是相对位置的工作原理——它在“流动”中保留空间。如果您不想保留空间，请使用绝对定位，或者使用负片

边距top

代替顶部。除此之外，使用

display:hidden

只会隐藏元素，而不是它所占用的空间，而

display:none

将使元素就布局而言根本不在DOM中

为了使绝对定位原点连接到contianer元素，您需要使容器

位置：相对

在这种情况下，容器就是您的

td

。但我不确定这将如何解决，因此您可能希望将这两个图像都放在

td

中的

div

中。但是如果你这样做的话，我只会将样式应用于

div

istelf，并使用class/id组合在

div

上切换图像背景

我现在的问题是 将“锁定”图像调整为打开 在原始图像的顶部，它仍然是 影响我的间距，好像是 从未动过

这本质上就是相对位置的工作原理——它在“流动”中保留空间。如果您不想保留空间，请使用绝对定位，或者使用负片

边距top

代替顶部。除此之外，使用

display:hidden

只会隐藏元素，而不是它所占用的空间，而

display:none

将使元素就布局而言根本不在DOM中

---

为了使绝对定位原点连接到contianer元素，您需要使容器

位置：相对

在这种情况下，容器就是您的

td

。但我不确定这将如何解决，因此您可能希望将这两个图像都放在

td

中的

div

中。但是如果你这样做的话，我只会将样式应用到

div

istelf，并使用class/id组合在

div

上切换图像背景。

太棒了，谢谢你提供的信息。我最后只是用“页边页边页边”替换了“页边页边”。很有魅力。太棒了，谢谢你的信息。我最后只是用“页边页边页边”替换了“页边页边”。工作起来很有魅力。

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

#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;
    }