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定义，因此浏览器会将其解释为覆盖前一个元素。< / p>

您的修复只是将您的z-index更改为

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

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

1 个答案: