Why does checking these custom checkboxes move screen position to top?

Question

I am using custom checkboxes using the method described here: http://www.csscheckbox.com/

Below is my demo link, if you scroll down and check any of the custom checkboxes, the screen will auto scroll back up to the top for some reason. How would you prevent that?

http://leongaban.com/_stack/check/demo.html

HTML

<ul>
    <li>
        <input type="checkbox" name="check-1" id="check-1" class="css-checkbox" />
        <label for="check-1" class="css-label radGroup1">Option 1</label>
    </li>
    <li>
        <input type="checkbox" name="check-2" id="check-2" class="css-checkbox" />
        <label for="check-2" class="css-label radGroup1">Option 2</label>
    </li>
    <li>
        <input type="checkbox" name="check-3" id="check-3" class="css-checkbox" />
        <label for="check-3" class="css-label radGroup1">Option 3</label>
    </li>
</ul>

CSS

input[type=checkbox].css-checkbox {
    position:absolute;
    z-index:-1000;
    top:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}

input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-    label.clr {
    padding-left:22px;
    height:17px; 
    display:inline-block;
    line-height:17px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:17px;
    vertical-align:middle;
    cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
    background-position: 0 -17px;
}

label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_8fa6297cf86891252915e1a1f59b58df.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 1

You have to remove top: -1000px from this class:

input[type=checkbox].css-checkbox {
    position:absolute;
    z-index:-1000;
    /*top:-1000px;*/
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}

.block {
    padding: 40px;
    height: 1200px;
    font-family: Arial;
    text-align: center;
    /*line-height: 1200px;*/
    color: white;
    background: blue;
}
li {
    list-style: none;
}
input[type=checkbox].css-checkbox {
    position:absolute;
    z-index:-1000;
    /*top:-1000px;*/
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}

input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
    padding-left:22px;
    height:17px;
    display:inline-block;
    line-height:17px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:17px;
    vertical-align:middle;
    cursor:pointer;   
    position: relative;
}
input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
    background-position: 0 -17px;
}

label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_8fa6297cf86891252915e1a1f59b58df.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<div class="block">1200px tall, scroll down</div>
<ul>
    <li>
        <input type="checkbox" name="check-1" id="check-1" class="css-checkbox">
        <label for="check-1" class="css-label radGroup1">Option 1</label>
    </li>
    <li>
        <input type="checkbox" name="check-2" id="check-2" class="css-checkbox">
        <label for="check-2" class="css-label radGroup1">Option 2</label>
    </li>
    <li>
        <input type="checkbox" name="check-3" id="check-3" class="css-checkbox">
        <label for="check-3" class="css-label radGroup1" style="
    display: block;
    position: relative;
    overflow: hidden;
">Option 3</label>
    </li>
</ul>

Answer 2

This is happening because you are positioning the checkbox absolutely and -1000px from the top.

When you click on the checkbox/label, you're triggering the checkbox to change which causes the jump to the top.

Just change/remove the position:absolute; and/or top:-1000px;