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

Question

我的导航栏中的子菜单呈现在主要内容的后面。更具体地说，我有一个导航组件，它位于另一个包含 h1 元素的组件之上。导航栏中的子菜单明显位于主体组件中的 h1 元素后面(因为没有背景)。它也被页脚隐藏了。

在主应用程序组件中，模板如下所示:

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

奇怪的是我将我的代码复制粘贴到 JSFiddle 中，您可以看到我在 fiddle 中将 nova-navigation 模板 HTML 和主体组件 HTML 分开的地方，但是问题消失了，子菜单呈现正确。我是 Angular 的新手，所以我想我对 Angular 的工作原理有所了解。

这是 JSFiddle 的链接:https://jsfiddle.net/jonnylin13/nwxyd8j8/

我已经尝试过 z-index 和 overflow

编辑 ** 问题一定出在我的本地环境上，因为我创建了一个 plnkr，但问题不存在。 http://plnkr.co/edit/Pzzt6C4C9OrAvil50yqT?p=preview

Answer 1

因为我不能评论，我会帮你回答。我可以向您推荐 z-index。但是你必须记住，z-index 需要属性 position 才能工作。

我希望这对你有帮助，让我知道!