Why does checking these custom flags move the screen position up?

Question

I use custom flags using the method described here: http://www.csscheckbox.com/

Below is my demo link, if you scroll down and check any custom flags, for some reason the screen will automatically scroll back up. How could you prevent this?

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 need 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 because you check the box absolutely and -1000px at the top.

When you click on the checkbox / label, you call up the checkbox to change, which leads to a jump up.

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