Checkbox checked is not working. HTML CSS

I am creating the sliding navbar using the checkbox method.

[But for only demo purpose i am changing the background to "blue"]

I used label and if checkbox is checked Its background changes to "blue". But It Is Not Working

Please Explain Why????

[See the code at https://codepen.io/adi45code/pen/abmxgQj]

HTML

<div class="position-right">
        <div class="nav-ele home">Home</div>
        <div class="nav-ele about">About</div>
        <div class="nav-ele services">Service</div>
        <div class="nav-ele goals">Goals</div>
        <div class="nav-ele contactus">Contact Us</div>
      </div>
      
      <!--Checkbox Toogle-->
     <input type="checkbox" id="checkbox"/>
    <label for="checkbox"><span>ColorRed</span></label>

CSS

  .position-right {
    flex-direction: column;
    background: #000000;
    width: 50%;
    height: 200px;
    text-align: center;
    transition: all .2s;
    position: absolute;
    left: -10px;
    color: red;
  }
  #checkbox:checked +.position-right {
    background: blue;
  }
  
span,input{
  position: absolute;
  right: 0;
  padding :10px;
}
input{
  top: 30px;
}
span:hover{
  color: red;
}