Question

对于我的联系页面，我创建了一个带有li内容的导航（例如，家庭，关于我们，博客等），我有一个主要的'.contact_header'，其中包含'.contact_header_cover'＆amp; 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

我重叠2个div'.contact_header_cover'（浅绿色背景）＆amp; '.contact_nav_list'但是这样做我无法点击ul＆gt;＆gt; li链接
对于班级'.contact_header'我给它一个位置：亲戚
对于班级'.contact_header_cover'，我给它一个位置：绝对
对于班级'。 contact_nav_list'我给了它一个位置：绝对＆amp;的z-index：1;

CSS问题：尝试重叠div我无法点击我的li链接（主页，关于，博客等）下面是我的HTML＆amp; 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

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

Answer 2

请参阅小提琴：http://jsfiddle.net/arwwtLup/

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

给它一个绝对的位置，它会起作用。你必须将它定位于你的喜好：）...

Answer 3

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

HTML CSS Div重叠绝对＆amp;相对位置

3 个答案: