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

Question

我在顶部有一个固定的菜单，Z值为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; 
}