Question

首先，我正在使用this responsive template来创建网站。向下滚动到页脚时，顶部的导航栏位于内容上方，因此您可以随时查看导航栏。但是当你到达页脚时，页脚只是重叠导航栏。看来，z-index属性没有生效。这个bug只在Safari中出现。当您的分辨率类似于移动分辨率（肖像）时，您可以重现它。

[仅限SAFARI]，此错误不会出现在Chrome或Firefox中

我真的不知道该怎么做，我已经尝试了一些没有解决问题的东西。

请帮助:) Thx

编辑：

Navbar在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);
}

Answer 1

它消失了，因为你在你的min风格中将#slidebox设置为display: none;。只需删除display: none;

即可

Answer 2

您是否尝试在导航栏和页脚上使用z-index？它应该在每个浏览器中正常开展业务。

确保页脚的值始终低于导航栏。

z-index在safari中不起作用

2 个答案: