Checkbox property set to visbility:hidden acts like display:none

When i set the checkbox property "visibility: hidden" it acts like "display: none". Meaning it's is not visible and not accessible. For example in the code below i overlayed my checkbox over the text creating the effect that when the text is clicked the checkbox should be checked. Setting the "opacity:0" will create the effect for me. I just want an explanation why "visible:hidden" kinda removes the checkbox.

To test this you can remove the visibility property to show the checkbox

div {
  position: relative;
  width: 200px;
  border: 1px solid red;
}
input {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    visibility: hidden;
    height: 100%;
    cursor: pointer;
    /**opacity: 0;**//**I can use this instead tho**/
}

<div>
  <input id="units" type="checkbox" value="13"><span class="btn">TEST</span>
</div>