html 嗨，我需要在滚动时不显示卡片,导航栏的z索引=999

jhkqcmku 于 2022-12-09 发布在其他

关注(0)|答案(2)|浏览(184)

下面是导航栏的代码：

display: flex;
width: 100%;
height: 100px;
justify-content: space-between;
align-items: center;
box-shadow: 2px 2px 15px #616161;
position: sticky;
top: 0;
z-index: 1000;

和卡片：

background: #fff;
width: 80%;
border-radius: 15px;
margin: 20px 0;
max-height: 190px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

（https://i.stack.imgur.com/tDbyM.png）（英文）
我希望导航栏显示在卡片上。

Html

来源：https://stackoverflow.com/questions/74729560/hi-i-need-the-card-not-to-be-shown-while-scrolling-the-navigation-bar-has-the

2条答案

按热度按时间

juud5qan1#

@chrslg的建议是正确的，你必须在导航栏中添加background-color，就像这样：

.your_navbar_class {
    display: flex;
    width: 100%;
    height: 100px;
    justify-content: space-between;
    align-items: center;
    box-shadow: 2px 2px 15px #616161;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white; /* Added */
}

赞(0）回复(0）举报 2022-12-09

laik7k3q2#

只是为了证明我的观点（对你和对我自己：-）），看到这个被剪掉了。
你的div.nav已经结束了，正如你所希望的。但是我们看到的内容。如果你点击“切换背景”按钮，你可以看到它确实结束了。
第一个

赞(0）回复(0）举报 2022-12-09