Question

我正在尝试为网站实施全屏导航覆盖。出于某种原因，我无法单独在导航图标上获取z-index。我以前看过它，但我不确定我做错了什么，因为它不起作用。

这是我到目前为止导航的代码： http://codepen.io/anon/pen/eJKxYy

正如您可以看到的那样，会出现导航，但图标仍然隐藏。这不是firefox中的问题;只有铬

 <div id="loadscreen">
     <nav class="nav">
         <section class="nav-wrapper">
             <aside class="sub-title-container">
                 <hr> <br>
                 <p class="sub-title">Navigation</p>
             </aside>

             <ul class="list">
                 <li class="nav-right"><a href="#">Index</a></li>
                 <li><a href="#">Work</a></li>
                 <li class="nav-right"><a href="#">Blog</a></li>
                 <li><a href="#">Contact</a></li>
             </ul>
         </section>
     </nav>
 </div>
 <div class="cf wrapper">
     <header class="cf">
         <h1 class="name"><a href="../index.html">Colette</a></h1>
         <div class="page-title"><h2>Blog</h2></div>
         <button class="c-hamburger c-hamburger--htx">
             <span>toggle menu</span>
         </button>
     </header>
 </div>

Answer 1

尝试更改此内容：

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  right: 0;
  width: 24px;
  height: 4px;
  background-color: #928763;
  content: "";
}

到此：

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  right: 0;
  z-index: 30; /* <<<<< */
  width: 24px;
  height: 4px;
  background-color: #928763;
  content: "";
}

Answer 2

这里的问题是#loadscreen的z-index比.cf包装器高。所以无论你设置什么.c-hamburger总是在#loadscreen下（因为.c-hamburger嵌套在.cf包装器中）。

您可以作弊，只需在#loadscreen中添加另一个按钮元素即可匹配.c-hamburger，或者将.c-hamburger移出.cf包装。

z-index适用于Firefox，但不适用于chrome

2 个答案: