How can I prevent the browser from scrolling on top of the page when clicking the checkbox?

Question

Whenever I click on the checkbox, the browser window (firefox) will scroll on the top of the screen.
How can I prevent this behavior so when I click on the checkbox the

Answer 1

The answer accepted is not entirely true. Works, but not in all cases.

If you use the common css to hide elements (probably -999em or similar) at the "top" attribute, in this case position:relative has nothing to do because always -999em will be much higher than the viewport.

The answer accepted works fine because the "top" is only -20px . Try to set it a more higher number and you´ll see the problem.

So, the solution is not to set a relative position. I think the correct way is only to set a negative value at left position (not top).

Try it. :)