Question

我正在处理网页的滑出式导航。我试图只用HTML和CSS这样做。隐藏的复选框由相应的标签切换。除了定位问题，一切都运转良好。

我遇到的问题是在标签上放置position: fixed。我在用户滚动页面时使用position: fixed来显示切换器和侧边栏。通过定位，标签和复选框之间的链接被破坏。这是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>

CSS（本例中为SASS）：

 #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)

这完全没问题;但是，从标签上的position: fixed删除评论会破坏链接。为确保这一点，我从复选框中删除了display: none。在此状态下，单击标签元素不会导致复选框切换。

是什么导致这个看似无关的财产出现这种奇怪的突破？我如何能够保持标签的定位，同时又是功能性复选框/侧边栏？

标签上定位的奇怪行为

0 个答案: