html - it keeps navigating me to top of page when clicking on a button -

html - it keeps navigating me to top of page when clicking on a button -

below piece of code styles checkbox create button, problem having though how come when click on checkbox button keeps navigating me top top of page?

html/php:

echo '<div id="ck-button"><label><input type="checkbox" name="options[]" id="option-' . $indivoption . '" value="' . $indivoption . '" /><span>' . $indivoption . '</span></label></div>';

css:

#ck-button { margin:8px; background-color:#efefef; border:1px solid #d0d0d0; overflow:auto; float:left; } #ck-button:hover { background:green; } #ck-button label { float:left; width:4.0em; } #ck-button label span { text-align:center; padding:3px 0px; display:block; } #ck-button label input { position:absolute; top:-20px; } #ck-button input:checked + span { background-color:#911; color:#fff; }

you need add together position: relative; #ck-button selector.

#ck-button { margin:8px; background-color:#efefef; border:1px solid #d0d0d0; overflow:auto; float:left; position: relative; }

here's working illustration on js bin. (scroll downwards see button)

html css