个人中心
gpt4 book ai didi

html - 为什么这个导航栏不会显示在其他所有内容之上？

转载 作者：行者123 更新时间：2023-11-28 00:35:28 26 4
gpt4 key购买 nike

我一直在一个网站上工作，我无法让顶部的导航栏显示在其他所有内容之上。它显示在第一个标题和 p 标签上方，但之后当滚动更多时，它显示在 bootstrap 4 网格中的图像和标题下方。我试过将 z-index 设置为非常大的数字，将位置设置为绝对值并再次将 z-index 设置为大数字，但是这些方法都不起作用。我知道我已经将 div/navbar 的背景设置为黑色，但它仍然不会掩盖图像/文本。我该如何解决这个问题？

TL;DR:我的导航栏不会显示在我的 Bootstrap 行中的任何内容之上，我已经尝试了所有方法，我该如何解决这个问题？

@font-face {
    font-family: Quicksand-Bold;
    src: url(../data/Quicksand-Bold.otf);
}
@font-face {
    font-family: Quicksand;
    src: url(../data/Quicksand-Regular.otf);
}
html {
    background-color: black;
}
.container-fluid {
    background-color: black;
}
.row {
    margin:auto;
}
.sticky {
    position: sticky;
    top:0;
}
.navitem {
    color:white;
}
.navline {
    height: 5px;
    width: 0;
    background-color: #fff;
    margin: auto;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
}
.navitem:hover + .navline {
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    width:100%;
}
.navigation {
    list-style-type: none;
    text-align: center;
    padding: 0;
    margin: 0;
    background-color: black;
}
.navigation li {
    display: inline-block;
    font-size: 20px;
    padding: 20px;
    font-family: Quicksand, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navigation li a:hover {
    text-decoration: none;
    color:#ddd;
}
.navigation li a:active {
    text-decoration: none;
    color:#ddd;
}
.active {
    color:#fff;
}
.navline-active {
    height: 5px;
    width: 100%;
    background-color: #fff;
    margin: auto;
}
#headerline {
    height: 10px;
    width: 70%;
    background-color: #fff;
    margin: auto;
}
.no-a-style {
    color:white;
}
.no-a-style:hover {
    text-decoration: none;
    color:grey;
}
.navheader {
    color:white;
    padding-right: 10px;
    font-size:25px;
    font-family: Quicksand-Bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer {
    text-align: center;
    color: lightgrey;
    font-family: Quicksand, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer-bold {
    font-family: Quicksand-Bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.body {
    color:white;
}
.body p {
    font-size:18px;
}
.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.nav-container {
    background:black;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="favicon.ico" />
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <!-- redacted lmao -->
  <!-- Site embed properties -->
  <meta property="og:title" content="Hex - Portfolio" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="http://hexbugman213.net/" />
  <meta property="og:image" content="http://hexbugman213.net/favicon.png" />
  <meta property="og:description" content="<?php echo $desc; ?>" />
  <title>Hex - Portfolio</title>
  <!-- meta -->
  <meta name="Hex" content="Hex - Portfolio" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- style/beanstrap -->
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="container sticky">
      <div class="sticky nav-container">
        <ul class="navigation">
          <li><span class="navheader">Hex</span>
            <div class="navline"></div>
          </li>
          <li><a href="/" class="navitem">Home</a>
            <div class="navline"></div>
          </li>
          <li><a href="/#links" class="navitem">Links</a>
            <div class="navline"></div>
          </li>
          <li><a href="/portfolio" class="navitem">Portfolio</a>
            <div class="navline"></div>
          </li>
          <li><a href="/files" class="navitem">Files</a>
            <div class="navline"></div>
          </li>
          <li><a href="/other" class="navitem">Other</a>
            <div class="navline"></div>
          </li>
        </ul>
      </div>
    </div>
    <br>
    <div class="container body">
      <h1>Portfolio</h1>
      <h2>Click on any item below for more information.</h2>
      <br>
      <div class="row">
        <div class="col-sm-4" data-aos="fade-right"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
        <div class="col-sm-8 text-center " data-aos="fade-left">
          <h1 class="p-text vertical-align">content</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-8 text-center " data-aos="fade-right">
          <h1 class="p-text vertical-align">content</h1>
        </div>
        <div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
      </div>
      <div class="row">
        <div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
        <div class="col-sm-8 text-center " data-aos="fade-right">
          <h1 class="p-text vertical-align">content</h1>
        </div>
      </div>
    </div>
    <hr>
    <div id="footer">
      <h3>Website designed by <span id="footer-bold">Hex</span>.</h3>
    </div>
  </div>
  <script>
    AOS.init();
  </script>
</body>

</html>

最佳答案

在 css 中为粘性类添加 z-index 属性并将其设置为高值。这将使它高于一切。

.sticky {
    position: sticky;
    top:0;
    z-index: 1000;
}

@font-face {
    font-family: Quicksand-Bold;
    src: url(../data/Quicksand-Bold.otf);
}
@font-face {
    font-family: Quicksand;
    src: url(../data/Quicksand-Regular.otf);
}
html {
    background-color: black;
}
.container-fluid {
    background-color: black;
}
.row {
    margin:auto;
}
.sticky {
    position: sticky;
    top:0;
    z-index: 1000;
}
.navitem {
    color:white;
}
.navline {
    height: 5px;
    width: 0;
    background-color: #fff;
    margin: auto;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
}
.navitem:hover + .navline {
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    width:100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="favicon.ico" />
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <!-- redacted lmao -->
  <!-- Site embed properties -->
  <meta property="og:title" content="Hex - Portfolio" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="http://hexbugman213.net/" />
  <meta property="og:image" content="http://hexbugman213.net/favicon.png" />
  <meta property="og:description" content="<?php echo $desc; ?>" />
  <title>Hex - Portfolio</title>
  <!-- meta -->
  <meta name="Hex" content="Hex - Portfolio" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- style/beanstrap -->
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="container sticky">
      <div class="sticky nav-container">
        <ul class="navigation">
          <li><span class="navheader">Hex</span>
            <div class="navline"></div>
          </li>
          <li><a href="/" class="navitem">Home</a>
            <div class="navline"></div>
          </li>
          <li><a href="/#links" class="navitem">Links</a>
            <div class="navline"></div>
          </li>
          <li><a href="/portfolio" class="navitem">Portfolio</a>
            <div class="navline"></div>
          </li>
          <li><a href="/files" class="navitem">Files</a>
            <div class="navline"></div>
          </li>
          <li><a href="/other" class="navitem">Other</a>
            <div class="navline"></div>
          </li>
        </ul>
      </div>
    </div>
    <br>
    <div class="container body">
      <h1>Portfolio</h1>
      <h2>Click on any item below for more information.</h2>
      <br>
      <div class="row">
        <div class="col-sm-4" data-aos="fade-right"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
        <div class="col-sm-8 text-center " data-aos="fade-left">
          <h1 class="p-text vertical-align">content</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-8 text-center " data-aos="fade-right">
          <h1 class="p-text vertical-align">content</h1>
        </div>
        <div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
      </div>
      <div class="row">
        <div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
        <div class="col-sm-8 text-center " data-aos="fade-right">
          <h1 class="p-text vertical-align">content</h1>
        </div>
      </div>
    </div>
    <hr>
    <div id="footer">
      <h3>Website designed by <span id="footer-bold">Hex</span>.</h3>
    </div>
  </div>
  <script>
    AOS.init();
  </script>
</body>

</html>
 Run code snippet

关于html - 为什么这个导航栏不会显示在其他所有内容之上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54171415/

26 4 0
文章推荐： php - 降低 php 中图像的大小和质量并用作 CSS 背景图像
文章推荐： css - 为什么在父项上应用 CSS-Filter 会破坏子项定位？
文章推荐： c++ - C++ 中的 "double free or corruption"错误
文章推荐： html - 如何在两个不同的div中将一个按钮放在右边，另一个按钮放在左边
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com