Я хочу добиться того, чтобы ссылки на моем сайте перемещались на 1 пиксель вниз, когда они находятся в активном состоянии (пользователь нажимает на них)
Я делаю это, применяя этот глобальный стиль:
a:active {
position:relative;
top:1px;
}
И это, конечно, работает - в большинстве случаев.Проблема в том, когда я пытаюсь сделать то же самое для ссылок, которые расположены абсолютно.Поскольку вышеприведенный стиль изменит их положение на относительное и, таким образом, вернет их в поток документов, исказив макет, поэтому я применил для них этот стиль:
#absolutly-positioned-link:active {
position:absolute;
/*and here I state their current position - 1px*/
}
Теперь вместо перемещения элемента на пиксель внизпо какой-то причине он отправляет его в верхнюю часть элемента оболочки.Вот простая демонстрация того, что происходит -> http://jsfiddle.net/Husar/ns5L7/
В скрипте у меня есть оба примера, как вы можете видеть, ссылки на заголовки работают просто отлично, но щелкнув ссылки назад / впереди внизу, простозапускает их наверх.
Единственное решение, которое я нашел до сих пор, состоит в том, что вместо глобального стиля a:active я явно заявляю, какие ссылки не расположены абсолютно (т.е. что-то вроде длинного селектора nav a:active, p a:active, h2 a:active, li a:active)и затем применить стили для абсолютно позиционированных элементов, просто изменив их координаты, не указав в селекторе: active, что они абсолютно позиционированы.Упрощенно, эта скрипка демонстрирует это -> http://jsfiddle.net/Husar/HfvCs/
Это прекрасно работает, однако я не думаю, что это самое элегантное решение, и я не понимаю, почему происходит такое поведение.
Если кто-то знает что-то еще об этой проблеме и о том, как ее можно решить, мы будем благодарны за помощь.