18910140161

Html

首页 >> 前端开发 >> Html

html-navbar，即使有z-index-stack溢出

顺晟科技

2022-10-19 12:56:46

233

内容下的Navbar。 我尝试使用Z索引，不同的位置类型，换行，但navbar仍然在其他内容下面。 我怎样才能解决这个问题？ 我需要navbar始终位于视口的顶部。

<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;
}

顺晟科技：

您的navbar不在内容下面，它只是没有背景色。只需设置在标题上。

<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;
}

jsfiddle demo

  • TAG：
上一篇：HTML-400在向Flask应用程 下一篇：HTML-表单堆栈溢出4个步骤的循环
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！