为什么此导航栏不能显示在其他所有内容上？

时间：2019-01-13 17:33:02

标签： html css bootstrap-4

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

TL; DR：我的导航栏不会在自举程序行的任何内容上方显示，我已经尝试了所有方法，如何解决此问题？

@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>

1 个答案:

答案 0 :(得分：0)

在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

相关问题
最新问题