当图像放在顶部时，纯 CSS 菜单不起作用答案

【问题标题】：Pure CSS Menu Doesn't Work When Image Laid on Top当图像放在顶部时，纯 CSS 菜单不起作用
【发布时间】：2014-02-26 23:54:08
【问题描述】：

我有一个网站，我希望标题稍微位于我的 CSS 菜单顶部。当图像放在上面时，我丢失了我的 CSS 菜单并希望保留我的 CSS 菜单。

我希望 NAVI div 中的 CSS 菜单位于 topLayer div 中最后一个图像的下方。

谁能解释一下解决办法。

http://jsfiddle.net/hjkopytko/AfWD5/

HTML：

<body>
<div class="wrapper">
  <header>
    <div class="topLayer">
     <a href="https://www.facebook.com/sawascana" target="_blank"><img src="media/images/metalFacebook.png" width="50" height="50"
                style="display:block;position:absolute;margin-left:1050px;margin-top:25px;z-index:10" /></a><a href="https://twitter.com/sawascana" target="_blank"><img src="media/images/metal-twitter.png" width="50" height="50" 
                style="display:block;position:absolute;margin-left:1050px;margin-top:100px; z-index:10"/></a><a href="index.html"><img src="media/images/logoWhiteText.png" width="400" height="103" 
                    style="display:block; position:absolute;margin-left:75px;margin-top:25px;z-index:10;"/></a> <img src="media/images/metalTop.png" width="1200" height="373" style="display:block;auto;z-index:5" />
   </div><!-- end of topLayer-->
  </header> <!----- end of header--> 
 <div class="container">
    <div class="whiteContainer">
      <div id="navi"> 
        <!-- the left side of the fork effect -->
        <div class="l-triangle-top"></div>
        <div class="l-triangle-bottom"></div>
        <div class="rec">
          <ul>
            <li class="sa">YOUR SA
              <ul>
                <li class="sa">Executive Council</li>
                <li class="sa">Bylaws</li>
                <li class="sa">Minutes</li>
                <li class="sa">Mission/Vision</li>
                <li class="sa">Reports</li>
                <li class="sa">SIAST Board Rep</li>
              </ul>
            </li>
            <li class="campus">CAMPUS LIFE
              <ul>
                <li class="campus">Blood Clinics</li>
                <li class="campus">Campus Policies</li>
                <li class="campus">Events</li>
                <li class="campus">Fitness Club</li>
                <li class="campus">Student Lounge</li>
                <li class="campus">Orientation</li>
                <li class="campus">Promotions</li>
                <li class="campus">Spirit Awards</li>
                <li class="campus">S A F E</li>
              </ul>
            </li>
            <li class="service">SERVICES
              <ul>
                <li class="service">Info</li>
                <li class="service">Aboriginal Awareness</li>
                <li class="service">AGM</li>
                <li class="service">Health & Dental</li>
                <li class="service">Advocacy/Rep</li>
                <li class="service">Campus Shop</li>
                <li class="service">Dean's Interaction</li>
                <li class="service">Income Tax Returns</li>
                <li class="service">Legal Consultation</li>
              </ul>
            </li>
            <li class="involve">GET INVOLVED
              <ul>
                <li class="involve">Campus Groups</li>
                <li class="involve">Leadership</li>
                <li class="involve">Program Rep</li>
                <li class="involve">Sub Committees</li>
                <li class="involve">Volunteering</li>
              </ul>
            </li>
            <li class="hello">CONTACT
              <ul>
                <li class="hello">Ad Opportunities</li>
                <li class="hello">Contact Form</li>
                <li class="hello">Office Info</li>
                <li class="hello">Staff</li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="r-triangle-top"></div>
        <div class="r-triangle-bottom"></div>
      </div>
      <!-- end of nav -->
      <div id="slider" style="top:-125px;"> <!--<a href="#" class="control_next">&gt;</a> <a href="#" class="control_prev">&lt;</a>-->
        <ul>
          <li><img src="media/images/banner1.jpg" /></li>
          <li><img src="media/images/banner2.jpg"/></li>
        </ul>
      </div> <!--end of slider-->
      <div id="column">
      <p>Left Column</p>
      </div>
      <div class="column">
      <p>right column</p>
    </div>
    <!--End of white container--> 

  </div>
  <!-- end .container-->

  <div class="push"></div>
  <!---meant to push content to bottom of page--> 
</div>
<footer> 
  <!---wrapper--> 
  <img src="media/images/metalBottom.png" width="1200" height="269" style="display:block; margin-left:auto; margin-right:auto ;z-index:10;" /> </footer>
</body>

【问题讨论】：

你能发个小提琴（jsfiddle.net）吗？
是的，我可以。 :) 感谢您的建议。
“当我使用 z-index 将它放在顶部时，我失去了纯 CSS 菜单。”你当然知道。这就像在手机上放一个盘子。你不能点击上面有东西的键。
jsfiddle.net/hjkopytko/AfWD5
谢谢你指出这一点，Paulie_D.. 现在你说我明白为什么会发生这种情况，但它并没有让我更接近解决方案。

标签： html css

【解决方案1】：

看看这个问题。 Click through a DIV to underlying elements

应该为您解决。基本上将pointer-events:none; 添加到您的叠加图像中。

【讨论】：

我希望我能说这行得通。但可惜它没有:(
在 IE 10 或更早版本中对此没有任何支持，这可能是您的问题。
我目前使用的是最新版本的 Chrome，但它无法正常工作。
如果您同时删除 .container 和 .whiteContainer 元素上的负 z-index，则 pointer-events 修复工作。