当我向上滚动时，我试图让导航栏下方的 div 元素进入导航栏下方。目前，当我向上滚动时，内容会越过导航栏。我尝试使用 stackoverflow 中的一些解决方案，但不知何故它不适用于我的情况。非常感谢您的帮助。
这是 HTML 代码:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
alpha.2/css/bootstrap.min.css" integrity="sha384-
y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd"
crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class = "container-fluid">
<div class = "navigation-bar" id = "nav-bar">
<div class = "w3-top">
<div class = "w3-bar w3-border w3-card-4" >
<a href = "#" class="w3-bar-item w3-button">About</a>
<a href = "#" class="w3-bar-item w3-button">Portfolio</a>
<a href = "#" class="w3-bar-item w3-button">Contact</a>
</div>
</div>
</div>
<body>
<div class = "Intro" id = "myIntro">
<div class="w3-panel w3-card-4">
<h4 class = "header" align = "center"> My workspace</h4>
<p>
<table style="width:90%">
<tr>
<td align = "center"><i>Aspiring developer</i></td>
<td align = "center"><i>Tech enthusiast</i>
<td align = "center"><i>Loves fishing</i>
</tr>
</table>
</p>
<hr>
</div>
</div>
这是当前的CSS代码:
.navigation-bar{
z-index: 1;
}
body {
padding: 50px;
z-index: -1;
}
h4 {
padding-top: 20px;
}
你可以通过这里看到发生了什么:https://codepen.io/chawin/pen/EWBaxo
最佳答案
实际上，在您的代码中，div 元素位于导航栏下方。它似乎是“越过”，因为导航栏的背景颜色是透明的 (rgba(0,0,0,0))。要解决此问题，您只需将导航栏的背景颜色定义为白色:
.navigation-bar .w3-top {
background: white;
}
请检查CodePen .
关于html - 向上滚动时如何使div元素位于导航栏下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43289065/