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

Question

导航栏中的子菜单是在主要内容后面呈现的。更具体地说，我有一个导航组件，它位于包含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

Answer 1

由于我无法发表评论，我会帮助您回答。 我可以建议你z-index。 但你必须记住，z-index需要属性位置才能工作。

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

Answer 2

我没有使用过很多Angular，但是我遇到了与React类似的问题：框架将元素添加到DOM中以处理内容（比如包装动画等）。这些元素会干扰CSS的定位。

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

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