javascript - Angular 2 将组件向后移动(更改 z 位置)

Question

我正在尝试制作一个带有侧边菜单的响应式网络应用程序，当屏幕很小时，该菜单可以通过按钮隐藏和显示。但是，我发现当菜单显示时，它显示在我的主要组件“后面”(如下图所示)。我正在使用 angular 2 和来自 responsive website code 的一些 javascript/css

我的主要 app.component.html 看起来像

<header class="header clearfix">
    <button type="button" id="toggleMenu" class="toggle_menu">
      <i class="fa fa-bars"></i>
    </button>
    <h1>Timesheet</h1>
</header>

<nav class="vertical_nav">
    <ul id="js-menu" class="menu">

        <li class="menu--item">
            <a [routerLink]="['/a']" class="menu--link" title="a">
                <i class="menu--icon  fa fa-fw fa-user"></i>
                <span class="menu--label">a</span>
            </a>
        </li>

        <li class="menu--item">
            <a [routerLink]="['/b']" class="menu--link" title="b">
                <i class="menu--icon  fa fa-fw fa-briefcase"></i>
                <span class="menu--label">b</span>
            </a>
        </li>

        <li class="menu--item">
            <a [routerLink]="['/c']" class="menu--link" title="c">
                <i class="menu--icon  fa fa-fw fa-cog"></i>
                <span class="menu--label">c</span>
            </a>
        </li>

        <li class="menu--item">
            <a [routerLink]="['/d']" class="menu--link" title="d">
                <i class="menu--icon  fa fa-fw fa-database"></i>
                <span class="menu--label">d</span>
            </a>
        </li>

        <li class="menu--item">
            <a [routerLink]="['/e-csv']" class="menu--link" title="e">
                <i class="menu--icon  fa fa-fw fa-globe"></i>
                <span class="menu--label">e</span>
            </a>
        </li>

    </ul>
</nav>


<div class="wrapper">
    <section>
        <router-outlet></router-outlet>
    </section>
</div>

Answer 1

只需添加一个 CSS 样式，或内联即可。

CSS

nav.vertical_nav {
  z-index: 9;
}

内联

<nav class="vertical_nav" style="z-index: 9;">