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

Question

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

滚动divCSS:

.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是固定菜单，因为它是"sticky"菜单）：

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

Link 到站点：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;
}

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

Overflow on div makes it appear above fixed menu

html

css

position

overflow