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の定義を持たないので、マークアップをチェックして、ブラウザが前の要素を調べるように解釈する必要があります。

あなたの修正が単に

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