css - PrimeFaces 大型菜单隐藏在中心内容、左侧和右侧栏后面

Question

我在<p:megaMenu>模板的标题上显示一个。

<p:layoutUnit id="topPanel" position="north" size="155" collapsed="false" resizable="false" closable="false" collapsible="false" gutter="6">

    <span style="position: absolute; top: 90px; width: 1360px; left: 0px; bottom: 0px; overflow-y: hidden;">

        <p:megaMenu>

        </p:megaMenu>

    </span>
</p:layoutUnit>

这<p:megaMenu>与所示链接所示的 PrimeFaces 展示中显示的相同（默认链接）。

如下所示。

当此菜单弹出时，它隐藏在内容栏的后面（<p:layoutUnit position="center"...>以及在快照中可以看到的左侧栏）。

我尝试过使用以下 CSS 类。

#topPanel {z-index:2 !important; }

但无济于事。

如何解决这个问题？如何<p:megaMenu>在内容栏和左右侧栏上显示？

Answer 1

需要覆盖以下 CSS 类。

.ui-layout-north {
    z-index: 20 !important;
    overflow: visible !important;
}

.ui-layout-unit-content {
    overflow:visible !important;
}

---

同样在这种特殊情况下，问题中显示style的标签的属性<span>需要修改如下。

<span style="position: absolute; top:90px; width:1360px; left:0px; bottom:0px;">

删除overflow-y: hidden;属性（不必要的），否则即使上面的 CSS 类已被覆盖，它也不起作用。