Issues with the CSS z-index

Question

I have an issue with the z-index. Can anyone check this code, please? CSS:

#apps_button {
    width:30px;
    height:30px;
    margin-left:16px;
    margin-top:16px;
    margin-right:16px;
    z-index:10;
}

#apps_box {
    display:none;
    background-color:#3F51B5;
    height:50vh;
    width:50vh;
    position:fixed;
    left:0;
    top:0;
    z-index:10;
    box-shadow:0 0 4px rgba(0,0,0,.24),0 4px 28px rgba(0,0,0,.48);
}

#apps_button:hover ~ #apps_box {
    position:fixed;
    top:0;
    right:0;
    display:block;
    z-index:10;
}

#apps_box:hover {
    display:block;
}

HTML (just a part):

            <span>
                <img src="img/apps.svg" id="apps_button">
                <div id="apps_box">
                    Apps
                </div>
            </span>
        </span>
    </header>
    <div id="body_content">
        <?php include("contents/Home/index.html"); ?>               
    </div>
    <footer>

    </footer>
</body>
</html>

The whole code is uploaded on here: https://www.skools.cu.ma/home.php When I hover over #apps_button, the #apps_box is being displayed. But under the #body_content. If you visit the code on my website, then please visit it on mobile phones because it's made for only mobile devices.

Answer 1

Set the z-index negative on #body_content

    #body_content {
    background-color: #fff;
    height: 80%;
    width: 86%;
    position: fixed;
    top: 16%;
    left: 7%;
    right: 7%;
    box-shadow: 0 0 4px rgba(0,0,0,.24), 0 4px 28px rgba(0,0,0,.48);
    overflow-y: scroll;
    z-index: -10;
}