我有一个网站，我希望标题稍微放在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">></a> <a href="#" class="control_prev"><</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>
最佳答案
看看这个问题。 Click through a DIV to underlying elements
应该为您修复它。基本上将pointer-events:none;添加到叠加图像中。
关于html - 当图像放在顶部时，纯CSS菜单不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22045578/