内容下的导航栏。我试着用z - index,不同的职位类型,一个包装但导航仍在其他内容。我该如何解决这个问题?我需要导航栏应该总是在视窗的顶部。
<html>
<head><title></title></head>
<header id="header">
<img src="https://cryptologos.cc/logos/sushiswap-sushi-logo.png?v=013" id="header-img">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#email">1</a></li>
<li><a class="nav-link" href="#Info">2</a></li>
<li><a class="nav-link" href="#Costi">3</a></li>
</ul>
</nav>
</header><br>
<div class="container">
<div class="Video"><iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/"></iframe></div><br>
<div class="Preventivo">Pr<form id="form" action="">
<input name="email" id="email" type="email" placeholder="e-mail" required><br>
<input id="submit" type="submit" value="ric" class="btn" />
</form></div>
<div id="Info">Lorem ipsum</div><br>
<div id="Costi"><div class="image"><img src="http://www.ristoratorigiapponesi.it/wp-content/uploads/2019/11/sushi_PNG9257.png"><div class="text-block">
<h4>lorem</h4>
<p>lorem</p>
</div>
</div></div>
<div class="Footer">Copyright 2021</div>
</div>
</html>
body {
margin: 0px;
}
#header-img {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
width: 50px;
height: 50px;
}
#header {
display: flex;
justify-content: space-between;
margin-left: 0;
margin-right: 0;
box-shadow: 0 4px 4px -6px black;
top: 0;
position: fixed;
width: 100%;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
letter-spacing: 2px;
word-spacing: 2px;
color: black;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
padding: 10px;
}
input {
width: 200px;
border-radius: 8px;
}
.btn {
box-shadow: 0px 1px 0px 0px #f0f7fa;
background-color:#e09b51;
border-radius:6px;
border:1px solid #057fd0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px -1px 0px #5b6178;
}
.btn:hover {
background-color:#754e0b;
}
.btn:active {
position:relative;
top:1px;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 0.3fr
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". Video ."
". Preventivo ."
"Info Info Info"
"Costi Costi Costi"
"Footer Footer Footer";
}
.Video {
grid-area: Video;
margin-top: 80px;
}
.Preventivo {
grid-area: Preventivo;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 20px;
letter-spacing: 0.6px;
word-spacing: -3.4px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: none;
}
#Info {
grid-area: Info;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
letter-spacing: 2px;
word-spacing: 2px;
color: #000000;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
margin-top:30px;
box-shadow:0 0.5px 1px 1px black;
}
#Costi {
grid-area: Costi;
margin-bottom:30px;
margin-left: -80px;
}
.Footer {
grid-area: Footer;
margin-left: 0;
margin-right: 0;
bottom: 0;
box-shadow: 0 2px 2px 2px black;
text-align: right;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 15px;
letter-spacing: 2px;
word-spacing: 2px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.image {
position: relative;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
font-family: Impact, Charcoal, sans-serif;
font-size: 25px;
letter-spacing: 2px;
word-spacing: 2px;
color: white;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
width: 500px;
margin: auto;
}
你的导航栏不在内容下面，它只是没有背景颜色。
background: #fff;
z-index: 100;
body {
margin: 0px;
}
#header-img {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
width: 50px;
height: 50px;
}
#header {
display: flex;
justify-content: space-between;
margin-left: 0;
margin-right: 0;
box-shadow: 0 4px 4px -6px black;
top: 0;
position: fixed;
width: 100%;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
letter-spacing: 2px;
word-spacing: 2px;
color: black;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
background: #fff;
z-index: 100;
}
li {
display: inline-block;
}
a {
text-decoration: none;
padding: 10px;
}
input {
width: 200px;
border-radius: 8px;
}
.btn {
box-shadow: 0px 1px 0px 0px #f0f7fa;
background-color: #e09b51;
border-radius: 6px;
border: 1px solid #057fd0;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px -1px 0px #5b6178;
}
.btn:hover {
background-color: #754e0b;
}
.btn:active {
position: relative;
top: 1px;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 0.3fr gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: ". Video ." ". Preventivo ." "Info Info Info" "Costi Costi Costi" "Footer Footer Footer";
}
.Video {
grid-area: Video;
margin-top: 80px;
}
.Preventivo {
grid-area: Preventivo;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 20px;
letter-spacing: 0.6px;
word-spacing: -3.4px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: none;
}
#Info {
grid-area: Info;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
letter-spacing: 2px;
word-spacing: 2px;
color: #000000;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
margin-top: 30px;
box-shadow: 0 0.5px 1px 1px black;
}
#Costi {
grid-area: Costi;
margin-bottom: 30px;
margin-left: -80px;
}
.Footer {
grid-area: Footer;
margin-left: 0;
margin-right: 0;
bottom: 0;
box-shadow: 0 2px 2px 2px black;
text-align: right;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 15px;
letter-spacing: 2px;
word-spacing: 2px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.image {
position: relative;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
font-family: Impact, Charcoal, sans-serif;
font-size: 25px;
letter-spacing: 2px;
word-spacing: 2px;
color: white;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
width: 500px;
margin: auto;
}<header id="header">
<img src="https://cryptologos.cc/logos/sushiswap-sushi-logo.png?v=013" id="header-img">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#email">1</a></li>
<li><a class="nav-link" href="#Info">2</a></li>
<li><a class="nav-link" href="#Costi">3</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="Video"><iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/"></iframe></div><br>
<div class="Preventivo">Pr
<form id="form" action="">
<input name="email" id="email" type="email" placeholder="e-mail" required><br>
<input id="submit" type="submit" value="ric" class="btn" />
</form>
</div>
<div id="Info">Lorem ipsum</div><br>
<div id="Costi">
<div class="image"><img src="http://www.ristoratorigiapponesi.it/wp-content/uploads/2019/11/sushi_PNG9257.png">
<div class="text-block">
<h4>lorem</h4>
<p>lorem</p>
</div>
</div>
</div>
<div class="Footer">Copyright 2021</div>
</div><JSFiddle演示/strong>