反应组件zIndex

Question

我的移动菜单组件的zIndex遇到了一些麻烦。这是我的标头组件代码。

      import React, { Component } from 'react';

      import Typed from 'react-typed';
      import Menu from './menu';
      import Bounce from './bounce';

      class Header extends Component {
        render() {
          return (
            <header className="header">
              <Menu/>

              <div className="col-md-12 intro animated fadeIn">
                <h1 className="hello text-center">Hi, I'm Taylor!</h1>
                <h1 className="hello-type text-center">I'm a <Typed strings={['front-end developer','front-end wizard','front-end developer']}
                                startDelay={600}
                                typeSpeed={70}
                                backSpeed={100}
                                backDelay={2000}
                                showCursor={false}
                                className="typed">
                </Typed><span className="typed-cursor">|</span></h1>
              </div>

              <Bounce />
            </header>
          );
        }

      }

      export default Header;

此外，这里是菜单组件代码，以防万一。

      import React, { Component } from 'react';

      import logo from './logo.png';

      class Menu extends Component {
        render() {
          return (
            <div className="menu-bar animated fadeIn">
              <div className="row">
                <div className="col-md-3">
                  <div className="logo">
                    <img src={logo} className="img-logo" alt="Taylor Parker"/>
                  </div>
                </div>
                <div className="col-md-9">
                  <nav className="menu">
                    <ul className="menu-list">
                      <li className="menu-item"><a href="app.js">About</a></li>
                      <li className="menu-item"><a href="app.js">Projects</a></li>
                      <li className="menu-item"><a href="app.js">Résumé</a></li>
                    </ul>
                  </nav>
                  <div className="button_container" id="toggle"><span className="top"></span><span className="middle"></span><span className="bottom"></span></div>
                  <div className="overlay" id="overlay">
                    <nav>
                      <ul>
                        <li><a href="about.js">About</a></li>
                        <li><a href="projects.js">Projects</a></li>
                        <li><a href="resume.js">Résumé</a></li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
            </div>
          );
        }

      }

      export default Menu;

这是打开移动菜单后页面的外观。 Mobile Menu Image

突出显示的部分是我无法弄清楚如何进入移动菜单叠加层的组件。在sass中使用z-index无法正常工作。我还尝试在标头组件中使用zIndex，但也未成功。

如何使这两个组件位于移动菜单中的藏青色覆盖下？