gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:01:51 26 4
gpt4 key购买 nike

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

Side menu hidden side menu shown

我的主要 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>

最佳答案

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

CSS

nav.vertical_nav {
z-index: 9;
}

内联

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

关于javascript - Angular 2 将组件向后移动(更改 z 位置),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41786872/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com