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>

我的问题的屏幕截图： Click here.

Answer 1

只是一个简单的解决方法，您需要将一个z-index应用于包含导航栏的div，而不仅仅是ul。

#navDiv {
  z-index: 1;
}

图像与导航栏重叠问题

1 个答案: