输入：选中+旁边，是否可以定位其他元素？

Question

在我的html中，我现在有标签和输入，我试图切换如下：

<label for="hamburger"><img src="images/hamburger.png"></label>
<input type="checkbox" id="hamburger" />
<aside>
     <!-- stuff -->
</aside>
<main>
    <!-- stuff -->
</main>

为了让事情变得有点复杂，只有当我们达到最大宽度为768px的媒体查询时，汉堡包才会出现：

@media(max-width:768px) {
aside {
    margin: -335px;
}
main {
    margin-left: 0;
}
label {
    position: absolute;
    top: 20px;
    left: 25px;
    width: 25px;
    height: auto;
    display: block;
    cursor: pointer;
}
#hamburger:checked + aside {
    margin: 0px;
}
}

所以会发生什么事情被拉到左边，这使得它看不见，主要现在填满屏幕，它的边缘消失，标签（#hamburger）出现。当我点击新出现的#hamburger时，它会在旁边显示并且不显示之间来回切换。我遇到的问题是这样的：我希望汉堡包能够在主要部分移动，因为我来回切换，而不是坐在html旁边。但是如果我移动主要内部的标签和复选框，我就无法将其放在一边，因为#hamburger：check + aside（为了+工作，我需要将它直接放在它上面）。

所以问题是我可以用#hamburger：checked .class {}来定位其他类，因为如果可以，我似乎无法弄清楚如何。如果我不能这样做，我该如何解决呢？

我很抱歉这个冗长的问题，但我想确保我能够彻底解释我的问题。