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

我打开了你的链接并且工作正常，内容显示在正文和标题内容之上。

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

CSS z-index的问题

2 个答案: