查看图像重叠导航栏的问题

Question

我遇到了这个问题，肖像与我的导航栏重叠。我一直在环顾四周，试图找到解决办法，但没有运气。我尝试过 z-index，但遗憾的是根本没有工作。

我的代码部分：

/*Navbar CSS*/
.topNavMain,
.topNavMain ul {
  margin: 0;
  padding: 0;
  background: rgba(227, 232, 237, 0.40);
  color: #5f6f81;
  list-style: none;
  text-transform: none;
  text-decoration: none;
  width: 100%;
  font-weight: 300;
  font-family: 'Lato', Arial, sans-serif;
  line-height: 60px;
  z-index: 999 !important;
}
/*img class CSS*/
.imgPortrait {
  width: 80%;
  z-index: -999;
  overflow: hidden;
}

<section id="aboutMe" class="contentS">
  <div class="container">
    <div class="row">
      <div class="col slideIn margin-fix">
        <h2 class="contentT">About me</h2>
        <p class="shortText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce mollis pretium felis id ultricies. Sed libero risus, volutpat vel rhoncus et, auctor non ipsum. <br> Praesent sollicitudin nibh nisl, et sagittis nulla ornare at.</p>
      </div>
      <div class="col slideIn2">
        <img src="img/portrait.jpg" alt="" class="imgPortrait img-fluid"></img>
      </div>
    </div>
  </div>
</section>

我的问题截图：点击这里。

Answer 1

只是一个简单的修复，您需要将 z 索引应用于包含 nav 的div，而不仅仅是 ul 。

#navDiv {
  z-index: 1;
}

Answer 2

在我的例子中，旋转木马的箭头与导航栏重叠。由于箭头图标已经将 z 索引设置为 1，因此在我的情况下，我必须将导航栏div 的 z 索引设为 2 并且它起作用了。

Answer 3

z-index 不适用于 position： static .它仅适用于位置：相对，绝对，固定或粘性。