下拉导航子菜单呈现在其他元素后面

我的导航栏中的子菜单呈现在主内容后面。更具体地说，我有一个导航组件正好在另一个包含h1元素的组件之上。导航栏中的子菜单明显位于主体组件中h1元素的后面（因为没有背景）。它也被页脚隐藏起来。下拉导航子菜单呈现在其他元素后面

在主应用程序组件，模板看起来是这样的：

<nova-header></nova-header> 
<nova-navigation [categories]="categories"></nova-navigation> 
<router-outlet></router-outlet> 
<nova-footer [categories]="categories"></nova-footer>

什么奇怪的是，我复制粘贴我的代码到的jsfiddle，你可以看到我已经分开nova-navigation模板HTML和小提琴中的主体组件HTML，但是问题消失了，子菜单正确显示。我是Angular的新手，所以我认为我错过了Angular的工作原理。

这里有一个链接，说的jsfiddle：https://jsfiddle.net/jonnylin13/nwxyd8j8/

我试过的z-index和溢出已经

编辑**问题一定是与本地环境，我创建了一个plnkr和问题不在那里。 http://plnkr.co/edit/Pzzt6C4C9OrAvil50yqT?p=preview

来源

2017-07-07 jonooo

尝试增加css中的z-index值为菜单 –

我已经尝试过，几乎所有的divs都出于绝望 – jonooo

不幸的是，我们无法真正地在没有[mcve]的情况下进行调试。 – TylerH

由于我不能评论，我会帮你回答。我可以建议你的Z指数。但是你必须记住，z-index需要属性位置才能工作。

我希望这会帮助你，让我知道！

来源

2017-07-07 15:53:23

我还没有使用Angular，但是我有类似的问题：React：框架添加元素到DOM中以处理内容（如包装动画等）。这些元素会影响CSS的定位。

当您检查浏览器中的代码时，是否注意到包含您的元素的任何额外的<span>或<div>？

如果是这样，您可能需要使用选择器.content > span来定义额外的CSS规则来设置它们的position，因为z-index only works on positioned elements。

来源

2017-07-07 16:06:50 twekz

下拉导航子菜单呈现在其他元素后面

回答

相关问题