<分区>
滚动时，HTML/CSS 图像背景填充固定导航和视口(viewport)顶部之间的空间
我不明白为什么，当我滚动时，导航和页面顶部之间显示了一部分背景图像。我将 nav 的 z-index 移动到 99，这有助于将它撞到背景图像的前面。
这是 codepen 源代码的链接:https://codepen.io/mclimb/pen/MWgZPmm
html, body {
height: 100%;
}
body{
font-family: "Helvetica";
}
.lander{
background-image: url("https://cdn.pixabay.com/photo/2014/11/13/23/34/london-530055_960_720.jpg");
height:90vh;
width:auto;
position:relative;
background-size:cover;
color:white;
text-align:center;
}
#let-credit{
font-size:2em;
padding:1.5em 0em 0em 0em;
font-weight: 300;
}
#how-it-works{
font-weight:300;
}
#logo{
margin-right: auto;
}
.navigation{
top:0;
background-color: white;
width: 100vw;
list-style: none;
padding: 1em 0em 1em 0em;
display:flex;
position: fixed;
z-index: 99;
}
.nav {
padding: 0em 1em 0em 1em;
}
.bottom-border:hover{
border-bottom: 3px solid grey;
} <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="site.css">
</head>
<body>
<div>
<ul class="navigation">
<li class="nav" id="logo">Company logo goes here</li>
<div class="bottom-border">
<li class="nav">Home</li>
</div>
<li class="nav">FAQ</li>
<li class="nav">Sign-up</li>
</ul>
</div>
<div class="lander">
<h1 id="let-credit">This is<br>a test site.</h1>
<h4 id="how-it-works">How it works.</h4>
</div>
<ol id="how-it-works">
<li>lorem</li>
<li>Ipsum.</li>
<li>Lorem.</li>
</ol>
</body>
</html>最佳答案
在你的 css 文件的开始写这个代码 * { margin:0;填充:0；
此代码选择您的 html 文件中的任何内容并删除所有默认边距和填充。
关于滚动时，HTML/CSS 图像背景填充固定导航和视口(viewport)顶部之间的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58054522/