Абсолютно позиционированные ссылки переходят в неожиданное положение при нажатии (a: active)

Question

У меня есть пара ссылок на этой странице (http://tuscaroratackle.com), которые оказываются на неожиданных позициях в своем активном состоянии. Ссылки абсолютно позиционированы, поэтому я полагаю, что проблема частично связана с этим.Но я не могу понять, к каким правилам применяются: активные, чтобы заставить их смещаться вниз и влево. У меня есть одно правило, которое заставляет их немного «угнетать» при активном (a:active {position:relative; top:1px;}), но можетЯ не могу понять, почему они так плохо смещаются.

Эти ссылки:

это ссылка "See Rods", которая появляется при наведенииЕсли вы нажмете, вы увидите неловкое результирующее позиционирование.

Также для тех, кто не знает (я недавно узнал), вы можете проверить: активное состояние в firefug. Просто используйте падениестрелка вниз на вкладке стиля, чтобы включить эти стили.

Answer 1

Из описания position:absolute:
Создает абсолютно позиционированный элемент, позиционированный относительно первого родительского элемента, который имеет позицию, отличную от статической.

И, как вы заметили, для a:active определено position:relative;. Следовательно, теперь в <a><span></span></a> комбинированная позиция span считается относительно позиции a, а не позиции .hp-promo-item.

Что касается решения, если вам нужно переместить a вниз на 1 пиксель на :active, возможно, margin-top будет работать лучше. Но подождите, у вас уже есть margin-top:1px для .promo-content .icon. Ну, может быть margin-top:2px !important; тогда. Я не совсем понимаю цель предложить больше.

PS Спасибо, что рассказали о :active помощнике в firebug, довольно полезном!