Strange behavior with positioning on label

I'm working on a slide out navigation for a webpage. I am attempting to do so with only HTML and CSS. There is a hidden checkbox that is toggled by the corresponding label. Beside's the positioning issue, everything is working fine.

The issue I'm having is with placing position: fixed on the label. I'm using position: fixed to have the toggler and sidebar visible while the user scrolls the page. With the positioning, the link between the label and checkbox is broken. Here's the HTML:

 <input type='checkbox' id='toggle'>

 <div class='main'>
   <label class='menu' for='toggle'>&#9776</label>
   <div class='side-nav'>
   </div>
   <section class='view' ui-view></section>
 </div>

And the CSS (SASS in this case):

 #toggle
    display: none
    &:checked + .main
        .side-nav
            left: 0px
        .menu
            left: 330px
.main
    width: 100%
    height: 100%
    left: 0
    background-color: $dark
    position: relative

    .side-nav
        top: 0
        bottom: 0
        left: -300px
        position: fixed
        z-index: 1
        width: 300px
        height: 100%
        background-color: $deepdark

    .menu
        // top: 20px
        // left: 30px
        // position: fixed
        -webkit-user-select: none
        user-select: none
        @include Silkscreen(100, #5e5e5e, 1.0, 40px)

This works completely fine; however, removing the comment from position: fixed on the label breaks the link. To make sure, I removed display: none from the checkbox. At this state, clicking the label element did not cause the checkbox to toggle.

What is causing this strange break from a seemingly unrelated property? How would I be able to maintain the label's positioning and at the same time a functional checkbox/sidebar?