div 上的溢出使其出现在固定菜单上方

Question

我在顶部有一个固定菜单，z-index 为 999（理论上阻止任何出现在它前面的东西）。我还有一个设计为水平滚动的 div。为什么滚动 div 上的溢出属性使其显示在菜单栏顶部？

滚动 div CSS：

.product-viewer {
    width: 85%;
    margin-left: 15%;
    display: inline-block;
    border-top-left-radius: 30px;
    border-top-left-radius: 3vmax;
    border-bottom-left-radius: 30px;
    border-bottom-left-radius: 3vmax;
    height: 300px;
    height: 30vmax;
    background-color: #202020;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    z-index: 0;
}

菜单栏 CSS（#menu.fix 是当菜单被固定时，因为它是一个“粘性”菜单）：

#menu {
    width: 100%;
    height: 50px;
    height: 5vmax;
    background-color: rgba(0, 0, 0, 0.8);
    background-blend-mode: hard-light;
    text-align: center;
    overflow: hidden;
    line-height: 50px;
    line-height: 5vmax;
    display: inline-block;
}

#menu.fix {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
}

网站链接：https://www.inquaress.com/ranges/beach

Answer 1

您的.cover-image 元素具有z-index: 0 !important;，这使其在以下元素下流动。您应该检查您的标记，因为您的菜单是 .cover-image 的子元素，并且您的以下元素 .section.no-select 没有 z-index 定义，因此浏览器会解释为遍历前一个元素。

你的解决方法就是改变你的 z-index 像

.cover-image {
    height: 600px;
    height: calc(100vh - 15vmax);
    max-height: 75vh;
    z-index: 1 !important;
}