html - 标题文本前面显示的主导航文本

Question

所以我让我的网站导航响应汉堡包，当我点击它时，我的文本显示在标题文本的前面，我无法点击它们。我不知道为什么会这样。我在横幅中添加了绝对位置，这样我就可以将它向下推并放在左侧。

header {
  background: url('../img/2.jpg');
  background-size: cover;
  width: 100%;
  height: 70vh;
  z-index: 999;
}

.main-nav {
  float: right;
  margin-top: 18px;
  margin-right: 50px;
}

.banner {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<header>
  <div class="sticky">
    <div class="logo">
      <a href="#"><img src="assets/img/logo.png" alt="Logo"></a>
      <!-- <h2>20.08 - 9 ЧАСА РАБОТА</h2> -->
    </div>

    <div class="expand">
      <i class="fas fa-bars" id="hamburger"></i>
    </div>

    <div class="main-nav">
      <ul>
        <li>
          <a href="#">HOME</a>
        </li>
        <li>
          <a href="#">ABOUT</a>
        </li>
        <li>
          <a href="#">PROCESS</a>
        </li>
        <li>
          <a href="#">SERVICES</a>
        </li>
        <li>
          <a href="#">TESTIMONIALS</a>
        </li>
        <li>
          <a href="#">CONTACT</a>
        </li>
      </ul>
    </div>
  </div>
</header>

<div class="banner">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h2>We Design and Develop</h2>
        <p>We are a new design studio based in USA. We have over 20 years of combined experience, and know a thing or two about designing websites and mobile apps.</p>
        <a href="#">CONTACT US</a>
      </div>
    </div>
  </div>
</div>

Answer 1

布局很奇怪，不完全知道你想要实现什么......但是话虽如此，你在问题中提出的核心问题是 banner 与你的重叠main-nav... 要解决这个问题，我们只需为 banner div 分配一个较低的 z-index 数字。

工作下面的片段:

header {
  background: url('../img/2.jpg');
  background-size: cover;
  width: 100%;
  height: 70vh;
  z-index: 999;
}

.banner {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1 !important;
}

.main-nav {
  float: right;
  margin-top: 18px;
  margin-right: 50px;
  z-index: 1 !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<header>
  <div class="sticky">
    <div class="logo">
      <a href="#"><img src="assets/img/logo.png" alt="Logo"></a>
      <!-- <h2>20.08 - 9 ЧАСА РАБОТА</h2> -->
    </div>

    <div class="expand">
      <i class="fas fa-bars" id="hamburger"></i>
    </div>

    <div class="main-nav">
      <ul>
        <li>
          <a href="#">HOME</a>
        </li>
        <li>
          <a href="#">ABOUT</a>
        </li>
        <li>
          <a href="#">PROCESS</a>
        </li>
        <li>
          <a href="#">SERVICES</a>
        </li>
        <li>
          <a href="#">TESTIMONIALS</a>
        </li>
        <li>
          <a href="#">CONTACT</a>
        </li>
      </ul>
    </div>
  </div>
</header>

<div class="banner">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h2>We Design and Develop</h2>
        <p>We are a new design studio based in USA. We have over 20 years of combined experience, and know a thing or two about designing websites and mobile apps.</p>
        <a href="#">CONTACT US</a>
      </div>
    </div>
  </div>
</div>