0
まず、私はthis responsive templateをウェブサイトの作成に使用しています。 フッターまでスクロールすると、上部のナビゲーションバーがコンテンツの上に表示されるため、常にナビゲーションバーが表示されます。しかし、フッターに達すると、フッターはナビゲーションバーに重なるだけです。 z-index属性は有効ではないようです。このバグはSafariでのみ発生します。解像度がモバイル解像度（ポートレイト）のようなものであれば、それを再現することができます。サファリでz-indexが機能しない
[ONLY SAFARIで]、このエラーがクロムまたはFirefox
に表示されますdoes notの私は本当に何をするか分からない、私はすでにこの問題を解決するdidntのいくつかのことを、試してみました。
助けてください:) Thxを
編集：
<!-- 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に実装された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-プロジェクトには行かなくてもいいですか？いいえ、[MCVE] – Pete
に情報を加えて作成してください。それが助けてくれることを願って – Jones