Html Zindex工作不正常_Html_Css

Html Zindex工作不正常

html css

Html Zindex工作不正常,html,css,Html,Css,我有一个我一直在努力开发的网站，该网站的一部分是开发一个滑动菜单，当鼠标滑过时可以水平滑动。我首先将菜单默认为完全扩展，这样更易于实时开发作为视觉参考，我试图实现以下目标： |--------------|_____________ |Menu 1 >|Menu 1 item 1| |Menu 2 .|Menu 1 item 2| |Menu 3 .|Menu 1 item 3| |______________|_____________| 我的代码

我有一个我一直在努力开发的网站，该网站的一部分是开发一个滑动菜单，当鼠标滑过时可以水平滑动。我首先将菜单默认为完全扩展，这样更易于实时开发

作为视觉参考，我试图实现以下目标：

|--------------|_____________
|Menu 1       >|Menu 1 item 1|
|Menu 2       .|Menu 1 item 2|
|Menu 3       .|Menu 1 item 3|
|______________|_____________|

我的代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
@charset "utf-8";
/* CSS Document */

#sidebar {
    position: fixed;
    left: 0;
    top: 0;
    background: #151515;
    width: 250px;
    height: 100%;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: hidden;
    display: block;
    transition: 0.5s;

}

#sidebarInfo{
    margin: 0px,5px,10px,5px;
    color: #7E7E7E;
    width: 100%;
    height: 50px;
    position: relative;
    font-family: allerta, sans-serif;
    font-size: 9.5px;
    top: 70%;
    align-content: center;
    display:flex;
    justify-content:center;
    align-items:center;
}

.sidebarLi{
    position: relative;
    margin: 10px;
    font-size: 28px;
    color: aliceblue;
    width: 100%;
    font-family: allerta, sans-serif;
}

.slideMenu{
    position:relative;
    transition:0.4s;

}
.menuItem{
    position:relative;
    transition: 0.4s;
    width: 150px;
    height: 30px;
    overflow-x: visible;
    overflow-y: visible;
    left: 180px;
    z-index: 0;
    color: #000000;
    background: #FFFFFF;
}

</style>

<title>Caduceus Technologies</title>

</head>

<body>
    <div id="sidebar">
        <div class="sidebarLi">
            &nbsp;•&nbsp;Home
        </div>
        <div class="sidebarLi">
            <div class="slideMenu">
                &nbsp;•&nbsp;Projects
                <div class="menuItem">
                    menuItem1
                </div>
            </div>
        </div>
        <div class="sidebarLi">
            &nbsp;•&nbsp;Resume
        </div>
        <div class="sidebarLi">
            &nbsp;•&nbsp;Contact
        </div>
    </div>
    <div style="background:#1D1D1D; position: relative; width:1000px; height: 1000px;">
        Lorem
    </div>
</body>
</html>


@字符集“utf-8”；
/*CSS文档*/
#边栏{
位置：固定；
左：0；
排名：0；
背景：#151515；
宽度：250px；
身高：100%；
z指数：2；
溢出x：隐藏；
溢出y：隐藏；
显示：块；
过渡：0.5s；
}
#sidebarInfo{
利润率：0px，5px，10px，5px；
颜色：#7E7E7E；
宽度：100%；
高度：50px；
位置：相对位置；
字体系列：allerta，无衬线；
字号：9.5px；
最高：70%；
对齐内容：居中对齐；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
西德巴利先生{
位置：相对位置；
利润率：10px；
字号：28px；
颜色：aliceblue；
宽度：100%；
字体系列：allerta，无衬线；
}
slideMenu先生{
位置：相对位置；
过渡：0.4s；
}
梅努特姆先生{
位置：相对位置；
过渡：0.4s；
宽度：150px；
高度：30px；
溢出x：可见；
溢出y：可见；
左：180像素；
z指数：0；
颜色：#000000；
背景：#FFFFFF；
}
Caduceus技术公司
•家
•项目
菜单项1
•恢复
•联系
洛勒姆

但是，虽然我无法上传图像，但解析此文档将显示menuItem one仅部分显示，即使Z值指示带有文本“menu Item”的div将位于顶部。到底出了什么问题？

menuItem1

部分显示，因为您的containing

边栏具有固定的宽度，并且具有溢出：隐藏的，隐藏溢出该容器的任何内容（而menuItem1
具有此功能）
移除overflow:hidden
并且它是可见的（但会溢出容器）。
我在.menuItem类中用visible覆盖隐藏属性，但它不是这样工作的。父容器具有溢出：隐藏
，因此溢出该容器的任何内容都将被隐藏。在子元素上设置overflow:visible
，只意味着溢出更小容器的任何内容都将可见。父容器仍然隐藏所有内容。使父溢出可见只是使菜单容器具有一个滚动条，它不会从容器中挤出菜单。我在这支笔中尝试过：-这是您想要的行为吗？