Включение взаимодействия с элементами нижнего стека (SASS / CSS). нет JS

Question

Я создал меню гамбургера, которое при проверке охватывает всю страницу. На моей странице есть ссылки и эффекты наведения, с которыми я бы хотел, чтобы пользователь взаимодействовал. Проблема заключается в том, что, когда я устанавливаю z-index в меню гамбургеров, чтобы оно отображалось в стопке поверх содержимого страницы, содержимое страницы становится нечитаемым, так что вы даже не можете нажимать на ссылки, а что нет. Это происходит еще до того, как меню гамбургера проверено и все еще невидимо. Есть ли способ решить эту проблему, чтобы пользователь мог взаимодействовать с содержимым страницы и при этом поддерживать более высокий порядок размещения в меню гамбургеров? Надеюсь, я хорошо себя объяснил. спасибо.

Мой код SASS слишком длинный, но позвольте мне опубликовать его на всякий случай

@import './variables';
@import './mixin';

html, body{
height: 100%;
width: 100%;
margin: 0;
}

/*layout.html*/
.header{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: fixed;

.checkbox{
    position:fixed;
    box-sizing: border-box;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;

    .navigation{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        >div{
            background-color: rgba(0, 0, 0, 0.8);
            border-radius: 50%;
            transform: scale(0);
            width: 200vw;
            height: 200vh;
            @include flexmix(column);
            flex:none;
            transition: all 0.4s ease-in-out;

            >div{
                opacity: 0;
                @include flexmix(column);
                transition: all 0.4s ease;
                ul{
                    li{
                        list-style: none;
                        @include flexmix(column);

                        a{
                            text-decoration: none;
                            color: $deepwhite;
                            padding: 10px;
                        }
                    }
                }
            }
        }
    }

    .toggler{
        position: absolute;
        z-index: 2;
        width: 50px;
        height: 50px;
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        opacity: 0;

        &:checked{
            +.btn {
                >div{
                    transform: rotate(135deg);
                    &::before, &::after{
                        transform: rotate(90deg);
                    }
                }
            }
            ~.navigation {
                visibility: visible;
                transition: all 0.1s ease 0.1s;
                >div{
                    transform: scale(1);
                    transition-duration: 0.4s;
                    >div{
                        opacity: 1;
                        transition: ease 0.3s ease 0.3s;
                    }
                }
            }
            &:hover{
                +.btn{
                    >div{
                        transform: rotate(225deg);
                        top: 0;
                    }
                }
            }
        }
    }
    .btn{ 
        @include flexmix(column);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 50px;
        height: 50px;
        div{
            width: 70%;
            height: 4px;
            background: $deepyellow;
            z-index: 1;
            border-radius: 5px;
            transition: all 0.3s ease-in-out 0.3s;
            position: relative;
            &::before,
            &::after{
                content: '';
                position: absolute;
                width: 100%;
                height: 4px;
                background: inherit;
                z-index: 1;
                border-radius: 5px;
                transition: all 0.3s ease-in-out 0.3s;
                z-index: 1;
            }
            &::before{
                top: -16px;
            } 
            &::after{
                top: 16px;
            }
        }        
    }
}
}
.main{
position: relative;
top: 5em;

/*home.html*/
.first{
    @include grids();
    grid-template-areas: 
    'upleft katikati katikati rightsec'
    'downleft katikati katikati rightsec';
    .upper-left{
        grid-area: upleft;
        @include boxes();
        background-image: url('1.jpg');
        @include imgs();
        @include flexmix(column);
        h2 {
            @include fonts(1rem)
        }
    }
    .bottom-left{
        grid-area: downleft;
        @include boxes();
        background-image: url('2.jpg');
        @include imgs();
        @include flexmix(column);
        h2 {
            @include fonts(1rem);
        }
    }
    .middle-sec{
        grid-area: katikati;
        @include boxes();
        margin: 0;
        background-image: url('3.jpg');
        @include imgs();
        @include flexmix(column);
        h1 {
            @include fonts(2rem);
        }
        p{
            @include fonts(0.7rem);
            color: $deepblue;
        }
    }
    .right-sec{
        grid-area: rightsec;
        @include boxes();
        background-image: url('4.jpg');
        @include imgs();
        @include flexmix(column);
        h2 {
            @include fonts(1rem);
        }
    }
}
.middle-page {
    margin-top: 30px;
    ul{
    @include grids();
    grid-template-columns: repeat(4, 1fr);
    border: none;
    padding: 5rem;

        li{
            list-style: none;
            @include flexmix(column);
            a{
                text-decoration: none;
                box-sizing: border-box;
                padding: 20px;
                border-radius: 100%;
                color: $deepyellow;
                background-color: $deepblue;
                transition: all 0.3s ease 0.3s;
                &:hover{
                    transform: scale(1.2, 1.2);
                    opacity: 0.7;
                }
            }
            small{
                font-family: sans-serif;
                margin-top: 5px;                   
            }
        }
    }
}
.bottom{
    @include grids();
    grid-template-columns: repeat(2, 1fr);
    @include boxes();
    margin-bottom: 20px;
    border: none;
    align-items: center;
    .picture{
        width: 100%;
        height: 400px;
        box-sizing: border-box;
        padding: 10px;
    }
    p{
        @include fonts(1rem);
        color: $deepblue;
    }
}
.footer{
    background: $deepblue;
    padding: 2rem;
    border: none;
    text-align: center;
    p{
        @include fonts(1rem)
        color:$deepwhite;
    }
}
}

и вот HTML`

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='{{url_for('static', filename='scss/style.css')}}'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- 
awesome.min.css">
<title>Flask</title>
</head>
<body>
<header class='header'>
<div class='checkbox'>
    <input type='checkbox' class='toggler'>
    <div class='btn'><div></div></div>
        <nav class='navigation'>
            <div>
                <div>
                    <ul>
                        <li><a href='{{url_for('home')}}'>Home</a></li>
                        <li><a href='{{url_for('about')}}'>About</a></li>
                        <li><a href='{{url_for('login')}}'>Login</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
</header>
<main class='main'>
    {% block content%}
    {%endblock%}
</main>
</body>
</html>
{% extends 'layout.html'%}
{% block content  %}
<section class='first'>
    <div class='upper-left'>
        <h2>Car Section</h2>
    </div>
    <div class='bottom-left'>
        <h2>Phone Section</h2>
    </div>
    <div class='middle-sec'>
        <h1>This is the Home Page</h1>
        <p>A lamboghini was running with ice. He went far far away.
        He start playing with another lambighini. The lamboghini his name was Prince.
        He was color golden.He was the best lamboghini in the world. Then he said pink lamboghini
        do you want to come with me. And he said yes.</p>
    </div>
    <div class='right-sec'>
        <h2>Contact Us</h2>
    </div>
</section>
<section class='middle-page'>
    <ul>
        <li><a href='#'><i class="fa fa-address-card"></i></a><small>Communication</small></li>
        <li><a href='#'><i class="fa fa-bullseye"></i></a><small>Task and Projects</small></li>
        <li><a href='#'><i class="fa fa-crosshairs"></i></i></a><small>CRM</small></li>
        <li><a href='#'><i class="fa fa-comment"></i></i></i></a><small>Contact Center</small></li>
    </ul>
</section>
<section class='bottom'>
    <image class='picture' src='{{url_for('static', filename='scss/picture.jpg')}}', default='image 
not found'>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias reiciendis deleniti 
possimus nemo non repellendus?
      Quae atque vero modi quidem! Autem cupiditate fugit doloribus ad amet, asperiores provident 
commodi.</p>
</section>
<footer class='footer'>
  <p>Nelliville &copy; 2020</p>
</footer>

{% endblock  %}

Answer 1

Я понял это сам. Все дело в том, чтобы возиться с z-index. Когда меню гамбургера переключается, установите более высокий номер z-индекса нижних элементов в стопке. Таким образом, когда меню гамбургера не сработало, сложенный элемент будет в исходном положении, но при срабатывании сложенные элементы поднимутся выше