CSS z-index 的问题

Question

我对 z-index 有疑问。任何人都可以检查这段代码吗？ 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（只是一部分）：

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

整个代码上传到这里： https://www.skools.cu.ma/home.php 当我将鼠标悬停在#apps_button 上时，将显示#apps_box。但是#body_content下。如果您访问我网站上的代码，请在手机上访问它，因为它只适用于移动设备。

Answer 1

在 #body_content 上设置负 z-index

    #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;
}

Answer 2

我打开了你的link，它工作正常，内容显示在body和header上面。

如果你弄明白了，请更新。谢谢

CSS z-index 的问题

Issues with the CSS z-index

css

z-index

css-position