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

【问题标题】：HTML CSS Div overlapping absolute & relative positionHTML CSS Div 重叠绝对和相对位置
【发布时间】：2014-12-28 00:52:58
【问题描述】：

对于我的联系页面，我创建了一个包含 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

我将“.contact_header_cover”（浅绿色背景）和“.contact_nav_list”两个 div 重叠，但这样做我无法单击 ul>>li 链接
对于“.contact_header”类，我给了它一个位置：相对
对于“.contact_header_cover”类，我给了它一个位置：绝对的
对于类 '. contact_nav_list' 我给了它一个位置：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>

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

见小提琴：http://jsfiddle.net/arwwtLup/

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

给它一个绝对位置，它就会起作用。您必须根据自己的喜好定位它:)...

【讨论】：

【解决方案3】：

z-index 必须有位置代码标签，例如 position:relative;要激活它，所以将该行代码放在 .contact_nav_list 中。为每个具有属性位置的类指定 z-indexes。使用 z-index css 代码（z-index:1; in .contact_header_cover, z-index:0; in .contact_header and z-index 3 for the list）它应该整理相对div容器的位置。如果这个解释太混乱，我可以重新创建一段确切的代码来放置。

【讨论】：