Проблемы с относительным позиционированием CSS, скорректированное наложение, по-прежнему занимающее исходное местоположение изображения - CSS

Question

Я пытаюсь в конце концов навести курсор мыши на наложенное изображение, и вместо создания двойных изображений для загрузки, у меня есть наложение маскированного изображения для всех 9 изображений.

Я буду использовать «видимость: (скрытый или видимый)», чтобы показывать изображение при наведении курсора.

Проблема, с которой я столкнулся, заключается в том, что после того, как изображение «lock» отрегулировано так, чтобы оно находилось поверх исходного изображения, оно все равно влияет на мой интервал, как если бы оно никогда не перемещалось.

пример здесь: 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

У меня проблема в том, что после изображение «блокировки» настроено на вершина исходного изображения, это все еще влияя на мой интервал, как будто это было никогда не двигался.

По сути, так работает относительное положение - оно резервирует пространство "в потоке". Если вы не хотите, чтобы зарезервированное пространство использовало абсолютное позиционирование - или вместо top используйте отрицательное значение margin-top. Вдобавок к этому использование display: hidden просто скрывает элемент - не пространство, которое он занимает, в то время как display: none сделает это так, как будто элемент вообще отсутствует в DOM, насколько это касается макета.

Для создания абсолютного исходного положения, привязанного к элементу contianer, вам нужно сделать контейнер position: relative, в этом случае контейнер - ваш td. но я не уверен, как это сработает, поэтому вы можете поместить оба изображения в div в td. Но если вы делаете это, я бы просто применил стили к div istelf и сделал ваши фоновые изображения на этом div, используя комбинации class / id для переключения.