css: override active link style?

Question

i have the following selector in my css:

a:active {
  position: relative;
  top: 1px;
}

So every link has this little button-effect when it\'s

Answer 1

Try resetting the top property as well.

a#back-to-top:active  {
    position: fixed !important;
    top: auto !important;
}

Answer 2

The following

a#back-to-top:active {
  position:fixed;
  top: auto;
}

would fix it, since it is more specific and will get applied, and it overrides the part that makes your button move..

No need for the !important directive since the rule has higher specificity and will get applied instead..

demo: http://jsfiddle.net/gaby/zUEER/

Answer 3

i think you should "reset" the top decleration

a#back-to-top:active  {
    position:fixed;
    bottom:20px;
    top: auto;
}

also, use !important only if for some reason the a#back-to-top:active style declartion comes before a:active one.