当我向下滚动时，正文中的图像显示在导航栏上方。然而，正文中的文本不受影响。所以我的问题是如何阻止这种情况发生。另一件事是如何使橙色“样本女王”标题显示在导航栏下方，因为它现在隐藏在导航栏下方。我希望内容从导航栏下方开始<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"><link rel="stylesheet" type="text/css" href="main.css"><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><script> /* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */var prevScrollpos = window.pageYOffset;window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-190px"; } prevScrollpos = currentScrollPos;}</script><body style="font-family:Century Gothic;"><div id="navbar" style="background-color:#f1f1f1;padding:15px;text-align: center;"> <img src="/Index Files/insta.png" id="border" alt="sample Queen" style="width:100px;height:100px;"> <img src="/Index Files/sample.png" id="border" alt="sample Queen" style="width:100px;height:100px;"> <img src="/Index Files/asample.png" id="border" alt="sample Queen" style="width:100px;height:100px;"> <img src="/Index Files/amazon.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;"> <img src="/Index Files/sample.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;"> <img src="/Index Files/sampleos.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;"></div> <h1><font color="orange">sample Queen</font></h1><h2>sample Queen is a small soap businets </h2></head>
1 回答
30秒到达战场
TA贡献1828条经验 获得超6个赞
请将以下行添加到您的 CSS 中。
#navbar{
z-index: 1000;
}
body{
padding-top: 200px;
}
您可以根据导航栏的高度控制 padding-top 值。
- 1 回答
- 0 关注
- 52 浏览
添加回答
举报
0/150
提交
取消