HTML CSS Div 重叠绝对和相对位置

Question

对于我的联系页面，我创建了一个包含 li 内容的导航(例如，主页、关于我们、博客等)，我有一个主 div '.contact_header'，其中包含 '.contact_header_cover' 和 contact_nav_list

<div class='contact_header'>
  <div class='contact_header_cover'></div>
  <div class='contact_nav_list'>
    <ul>
       <li><%= link_to "Home", '#' %></li>
       <li><%= link_to "About us", '#' %></li>
       <li><%= link_to "Blog", '#' %></li>
    </ul>
  </div>
</div

1. 我重叠了“.contact_header_cover”(浅绿色背景)和“.contact_nav_list”的 2 个 div，但在这样做时我无法点击 ul>>li 链接

2. 对于类 '.contact_header' 我给了它一个 position:relative

3. 对于类 '.contact_header_cover' 我给了它一个 position:absolute

4. 对于类'。 contact_nav_list' 我给了它一个 position:absolute & z-index:1;

CSS 问题:尝试重叠 div 我无法点击我的 li 链接(主页、关于、博客等)下面是我的 HTML 和 CSS 内容

CSS file
.static_background_img {
  background: url("img-bkground-image-staticpg.png");
  height: 100%;
  padding: 0px;
}

.contact_header {
  height: 100%;
  padding: 0px;
  position: relative;
}

.contact_header_cover {
  height: 100%;
  background-color: #3D8E58;
  opacity: 0.2;
  position: absolute;
  left: 0;
  right: 0;
}

.contact_nav_list {
  padding: 35px;
  z-index: 1;
}

.contact_nav_list ul {
  margin-bottom: 0px;
}

.contact_nav_list ul li {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 200;
  color: #aaa3a4;
}



HTML file
<div class="medium-12 columns static_background_img">
  <div class="home_line"></div>
  <nav>
    <div class="medium-12 columns contact_header">
      <div class="contact_header_cover"></div>
      <div class="contact_nav_list">
        <ul class="inline-list left">
          <li><%= link_to "logo", '#' %></li>
        </ul>
        <ul class="inline-list right">
          <li><%= link_to "Home", '#' %></li>
          <li><%= link_to "About", '#' %></li>
          <li><%= link_to "Blog", '#' %></li>
          <li><%= link_to "Contact us", '#' %></li>
          <li><%= link_to "Privacy", '#' %></li>
          <li><%= link_to "Terms", '#' %></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="medium-12 columns contact_content"> content info</div>
</div>

Answer 1

在 contact_header_cover 上尝试 pointer-events: none;。这会将任何鼠标事件传递给底层元素，就好像它不存在一样。