全屏菜单覆盖固定导航的问题

Question

我有一个很奇怪的问题。这是我创建的代码笔，用于向您展示我在说什么：http://codepen.io/Buzzlightyear90/pen/NqyoYK?editors=110

这是html

<header>
<div id="menu-button" role="button" title="sweet hamburger">
  <div class="hamburger">
    <div class="inner"></div>
  </div>
</div>
</header>
<nav>

  <div id="box-container">
    <div id="row1">
      <div class="box" id="box1">
        <p>About</p>
      </div>
      <div class="box" id="box2">
        <p>Work</p>
      </div>
    </div>
    <div id="row2">
      <div class="box" id="box3">
        <p>Contact</p>
      </div>
      <div class="box" id="box4">
        <p>Blog</p>
      </div>
    </div>
  </div>
</nav>

这是css

body {
  background: #edebe4;
}

header {
  background: #487C91;
  height: 100px;
  width: 100%;
  position: fixed;
}

#menu-button {
  border: 2px solid rgba(41, 37, 47, .3);
  background: rgba(41, 37, 47, 1);
  padding: 14px;
  position: absolute;
  top: 20px;
  right: 20px;
  transition: background 750ms ease-in-out;
  user-select: none;
  z-index: 100;
}

.menu-open #menu-button {
  background: rgba(41, 37, 47, 0);
}

.hamburger {
  position: relative;
  width: 25px;
  height: 20px;
  transition: transform 750ms ease-in-out;
}

#menu-button:active .hamburger {
  transition: transform 50ms;
  transform: scale(.95);
}

.hamburger::before,
.hamburger::after,
.hamburger .inner {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background: #ccc;
  transform-origin: 100% 50%;
  transition: all 750ms ease-in-out;
}

.hamburger::before {
  top: -1px;
}

.hamburger .inner {
  top: 9px;
  transform-origin: 50% 50%;
}

.hamburger::after {
  top: 19px;
}

.menu-open .hamburger {
  transform: rotateY(-180deg);
}

.menu-open #menu-button:active .hamburger {
  transform: scale(.95) rotateY(-180deg);
}

.menu-open .hamburger::before,
.menu-open .hamburger::after,
.menu-open .hamburger .inner {
  background: rgba(41, 37, 47, 1);
}

.menu-open .hamburger::before {
  transform: translate3d(-4px, 1px, 0) rotateZ(-45deg);
}

.menu-open .hamburger .inner {
  transform: rotateY(-90deg);
  transition: transform 375ms, background-color 750ms ease-in-out;
}

.menu-open .hamburger::after {
  transform: translate3d(-4px, -1px, 0) rotateZ(45deg);
}

#menu-button {
  border: 2px solid rgba(41, 37, 47, .3);
  background: rgba(41, 37, 47, 1);
  padding: 14px;
  position: absolute;
  top: 20px;
  right: 20px;
  @include transition(background 750ms ease-in-out);
  user-select: none;
  cursor: pointer;
  z-index: 1000;
}

.menu-open #menu-button {
  background: rgba(41, 37, 47, 0);
}

.hamburger {
  position: relative;
  width: 25px;
  height: 20px;
  @include transition(transform 750ms ease-in-out);
}

#menu-button:active .hamburger {
  @include transition(transform 50ms);
  @include transform(scale(0.95));
}

.hamburger::before,
.hamburger::after,
.hamburger .inner {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background: #ccc;
  @include transform-origin(100% 50%);
  @include transition(all 750ms ease-in-out);
}

//positions of the small vertical lines within the hamburger
.hamburger::before {
  top: -1px;
}

.hamburger .inner {
  top: 9px;
  @include transform-origin(50% 50%);
}

.hamburger::after {
  top: 19px;
}

.menu-open .hamburger {
  @include transform(rotateY(-180deg));
}

.menu-open #menu-button:active .hamburger {
  @include transform(scale(0.95) rotate(-180deg));
}

.menu-open .hamburger::before,
.menu-open .hamburger::after,
.menu-open .hamburger .inner {
  background: rgba(41, 37, 47, 1);
}

.menu-open .hamburger::before {
  @include transform(translate3d(-4px, 1px, 0) rotateZ(-45deg));
}

.menu-open .hamburger .inner {
  @include transform(rotateY(-90deg));
  @include transition(transform 375ms, background-color 750ms ease-in-out);
}

.menu-open .hamburger::after {
  @include transform(translate3d(-4px, 1px, 0) rotateZ(45deg));
}

.menu-holder {
  display: inline-block;
  font-family: "Docker", sans-serif;
  font-weight: bold;
  p {
    font-size: 25px;
    position: absolute;
    top: 10px;
    right: 97px;
  }
}
/******************* menu *********************/

nav {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  margin: 0 auto;
  z-index: 100;
}

#box-container {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: table;
  text-align: center;
  font-family: "Docker", sans-serif;
  font-weight: normal;
  font-size: 45px;
}

#row1,
#row2 {
  display: table-row;
}

#row1 div,
#row2 div {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}

.box {
  height: 50%;
}

.box p {
  cursor: pointer;
}

img {
  margin-bottom: -12px;
}

.temp {
  font-size: 40px;
}

#box1,
#box4 {
  background: #ccdcda;
}

#box2,
#box3 {
  background: #f6f6f6;
}

我有一个固定的标题，当我点击汉堡包菜单时，全屏菜单覆盖图会覆盖固定标题中的所有项目，除了汉堡包菜单。这在Firefox中运行良好，但在Chrome，Safari和Opera等所有webkit浏览器中，全屏布局覆盖整个固定标题。我试图改变固定元素中的z-index。在那些webkit浏览器中，它可以覆盖所有内容，也可以隐藏在所有内容之下。

发生了什么事？