Question

我正在尝试将粘性导航栏集成到我的网站中。但是，当我设置导航栏fixed的位置时，背景图像会覆盖它。我该如何解决这个问题？我希望我的导航栏能够覆盖可能存在的所有内容。

.fixed {
  position: fixed;
  top: 0;
}

这是我笔的链接：https://codepen.io/XpellCZ/pen/BRRzPW

感谢您的任何提示。

Answer 1

要使.navigation显示在叠加层顶部，请将其设置为z-index更高，例如：

.navigation {
  background-color: #000;
  z-index: 1
}

＆＃13;

body {
  font-size: 2em;
}

.navigation {
  background-color: #000;
  z-index: 1;
}

.container-fluid {
  margin: 0px;
  padding: 0px;
}

.pageOne {
  background-image: url("http://unsplash.com/photos/55xd_uiUYEE/download?force=true");
  height: 550px;
  background-size: cover;
  opacity: .3;
}

.fixed {
  position: fixed;
  top: 0;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<div class="container-fluid">
  <div class="navigation col-xs-12 fixed">
    <ul class="nav nav-pills">
      <li><a href="#">Marek Poul</a></li>
      <li class="pull-right"><a href="#">About Me</a></li>
      <li class="pull-right"><a href="#">References</a></li>
      <li class="pull-right"><a href="#">Contact Me</a></li>
    </ul>
  </div>
  <div class="pageOne col-xs-12"></div>
</div>

＆＃13;

Answer 2

尝试给它z-index

  .fixed{
    position:fixed;
    top:0;
    z-index:100;
}

Answer 3

使用z-index属性。

.fixed {
  position:fixed;
  top:0;
  z-index: 10;
}

Answer 4

您似乎正在使用引导程序，因此您可以浏览导航栏部分 https://getbootstrap.com/components/#navbar-fixed-top

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

如何使div叠加背景图像？

4 个答案: