0
首先，我使用this responsive template来创建网站。 当您向下滚动到页脚时，顶部的导航栏位于内容之上，因此您可以始终查看导航栏。但是，当您到达页脚时，页脚仅覆盖导航栏。看起来，z-index属性不起作用。此错误仅在Safari中。当你的分辨率像移动分辨率（人像）时，你可以重现它。z-index不适用于safari
[只有Safari]，那并不出现在Chrome或Firefox
我真的不知道该怎么办这个错误，我已经尝试了一些东西，这didnt解决问题。
请帮助:) THX
编辑：
导航栏作为遵循的index.html
<!-- PAGE -->
<div id="page">
<!-- HEADER -->
<header>
<!-- MENU BLOCK -->
<div class="menu_block">
<!-- CONTAINER -->
<div class="container clearfix">
<!-- LOGO -->
<div class="logo pull-left">
<a href="index.html" ><span class="b1">w</span><span class="b2">h</span><span class="b3">i</span><span class="b4">t</span><span class="b5">e</span></a>
</div><!-- //LOGO -->
<!-- SEARCH FORM -->
<div id="search-form" class="pull-right">
<form method="get" action="#">
<input type="text" name="Search" value="Search" onFocus="if (this.value == 'Search') this.value = '';" onBlur="if (this.value == '') this.value = 'Search';" />
</form>
</div><!-- SEARCH FORM -->
<!-- MENU -->
<div class="pull-right">
<nav class="navmenu center">
<ul>
<li class="first active scroll_btn"><a href="#home" >Home</a></li>
<li class="scroll_btn"><a href="#about" >About Us</a></li>
<li class="scroll_btn"><a href="#projects" >Projects</a></li>
<li class="scroll_btn"><a href="#team" >Team</a></li>
<li class="scroll_btn"><a href="#news" >News</a></li>
<li class="scroll_btn last"><a href="#contacts" >Contacts</a></li>
<li class="sub-menu">
<a href="javascript:void(0);" >Pages</a>
<ul>
<li><a href="blog.html" >Blog</a></li>
<li><a href="blog-post.html" >Blog Post</a></li>
<li><a href="portfolio-post.html" >Portfolio Single Work</a></li>
</ul>
</li>
</ul>
</nav>
</div><!-- //MENU -->
</div><!-- //MENU BLOCK -->
</div><!-- //CONTAINER -->
</header><!-- //HEADER -->
页脚是index.html中实现实施
<!-- FOOTER -->
<footer>
<!-- CONTAINER -->
<div class="container">
<!-- ROW -->
<div class="row" data-appear-top-offset="-200" data-animated="fadeInUp">
<div class="col-lg-4 col-md-4 col-sm-6 padbot30">
<h4><b>Featured</b> posts</h4>
<div class="recent_posts_small clearfix">
<div class="post_item_img_small">
<img src="images/blog/1.jpg" alt="" />
</div>
<div class="post_item_content_small">
<a class="title" href="blog.html" >As we have developed a unique layout template</a>
<ul class="post_item_inf_small">
<li>10 January 2014</li>
</ul>
</div>
</div>
<div class="recent_posts_small clearfix">
<div class="post_item_img_small">
<img src="images/blog/2.jpg" alt="" />
</div>
<div class="post_item_content_small">
<a class="title" href="blog.html" >How much is to develop a design for the game?</a>
<ul class="post_item_inf_small">
<li>14 January 2014</li>
</ul>
</div>
</div>
<div class="recent_posts_small clearfix">
<div class="post_item_img_small">
<img src="images/blog/3.jpg" alt="" />
</div>
<div class="post_item_content_small">
<a class="title" href="blog.html" >How to pump designer</a>
<ul class="post_item_inf_small">
<li>21 December 2013</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 padbot30 foot_about_block">
<h4><b>About</b> us</h4>
<p>We value people over profits, quality over quantity, and keeping it real. As such, we deliver an unmatched working relationship with our clients.</p>
<p>Our team is intentionally small, eclectic, and skilled; with our in-house expertise, we provide sharp and</p>
<ul class="social">
<li><a href="javascript:void(0);" ><i class="fa fa-twitter"></i></a></li>
<li><a href="javascript:void(0);" ><i class="fa fa-facebook"></i></a></li>
<li><a href="javascript:void(0);" ><i class="fa fa-google-plus"></i></a></li>
<li><a href="javascript:void(0);" ><i class="fa fa-pinterest-square"></i></a></li>
<li><a href="javascript:void(0);" ><i class="map_show fa fa-map-marker"></i></a></li>
</ul>
</div>
<div class="respond_clear"></div>
<div class="col-lg-4 col-md-4 padbot30">
<h4><b>Contacts</b> Us</h4>
<!-- CONTACT FORM -->
<div class="span9 contact_form">
<div id="note"></div>
<div id="fields">
<form id="contact-form-face" class="clearfix" action="#">
<input type="text" name="name" value="Name" onFocus="if (this.value == 'Name') this.value = '';" onBlur="if (this.value == '') this.value = 'Name';" />
<textarea name="message" onFocus="if (this.value == 'Message') this.value = '';" onBlur="if (this.value == '') this.value = 'Message';">Message</textarea>
<input class="contact_btn" type="submit" value="Send message" />
</form>
</div>
</div><!-- //CONTACT FORM -->
</div>
</div><!-- //ROW -->
</div><!-- //CONTAINER -->
</footer><!-- //FOOTER -->
style.css实现元素的以下样式：
页脚：
footer {
overflow:hidden;
position:fixed;
bottom:0;
left:50%;
opacity:0;
width:100%;
padding:60px 0 10px;
color:#999;
background-color: #1c1c1c;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
z-index:1;
}
Menu_block：
.menu_block {
position: fixed;
z-index:9999;
left:0;
top:0;
right:0;
height:80px;
width:100%;
background-color:#fff;
box-shadow:0 2px 3px rgba(0,0,0,0.1);
}
[我的网站上的某些东西无法正常工作，我可以直接粘贴一个链接吗？]（https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or- project-doesnt-work-can-i-just-paste-a-link-to-it）否，请创建一个[MCVE] – Pete
添加一些信息。希望它有帮助 – Jones