Question

我目前正在网站上，在网站顶部，我有一个导航栏，当您滚动时，该导航栏位于屏幕顶部。这是它的示例图像：https://i.imgur.com/R4QiDoP.png

问题是，当我向下滚动时，一些（但不是全部）文本可以通过导航栏看到并且变得难以辨认：https://i.imgur.com/LDnZ3ZN.png

以下是代码：

HTML

<div class="nav">
  <div class="container">
    <ul class="pull-left">
      <li><a href="./index.html">Home</a></li>
      <li><a href="./tools.html">Tools</a></li>
    </ul>
    <ul class="pull-right">
      <li><a href="./about.html">About Us</a></li>
      <li><a href="./contact.html">Contact Us</a></li>
    </ul>
  </div>
</div>

CSS

.nav {
  position: fixed;
  background-color: #efefef;
  border-bottom: 1px solid #dbdbdb;
  width: 100%;
  top: 0;
  opacity: 1.0;
}

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 10px 10px;
  text-transform: uppercase;
}

.nav a:hover {
    background: #e1e1e1;
    color: black;
}

.nav li {
  display: inline;
}

我已经尝试过更改不透明度，但这使它100％的时间变得难以辨认。我愿意尝试您的任何建议。谢谢！

Answer 1

检查您在网站中使用的Z索引，并确保为.nav提供最重的Z索引，这应该可以解决问题。这样做：

.nav {
    z-index: ...;  /* higher amount than used somewhere else */
}

让我知道是否可行！

Answer 2

您的导航和页面的其余部分可能位于同一“层”上，当它们重叠时，它们会相互融合在一起。尝试将z-index添加到.nav，以将其“放置”在页面其余部分的上方。 z-index的数字必须比页面上当前最高的z-index高1（如果没有其他元素具有z-index，则为1）。

.nav {
  z-index: 1;
}

透明导航栏CSS

2 个答案: