时间戳

首页 > 解决方案 > 查看图像重叠导航栏的问题

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

问题描述

我遇到了一个问题，即肖像与我的导航栏重叠。我一直在环顾四周，试图找到解决办法，但没有运气。我已经尝试过 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>

我的问题的屏幕截图： 单击此处。

标签： htmlcssbootstrap-4

解决方案

只是一个简单的修复，您需要将 z-index 应用于div包含导航的内容，而不仅仅是ul.

#navDiv {
  z-index: 1;
}

推荐阅读