角度2向后移动组件（更改z位置）

Question

我正在尝试使用侧边菜单制作一个响应式网络应用程序，当屏幕很小时，它会隐藏并通过按钮显示。但是，我发现当菜单显示时，它显示＆＃34;后面＆＃34;我的主要组成部分（如下图所示）。我正在使用角度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;">