如何更改 primefaces 咆哮组件的 z-index？

Question

我的问题是，我在页面顶部有一个固定的导航栏，它的 z-index 值为 1030。咆哮组件显示在固定导航栏后面。我试图像这样覆盖咆哮的 z-index 值（来自自定义 css 文件）：
.ui-growl { z-index: 9999; }
注意：我的自定义 css 文件是最后一个加载的文件：

...
 <h:body>
        <f:facet name="last">
            <h:outputStylesheet library="css" name="custom.css"/>
        </f:facet>
...

当我检查 chrome 中的 growl 组件时，它有一个带 z-index 值的内联 css 样式：

<div id="growl_container" class="ui-growl ui-widget" style="z-index: 1004;">...</div>

我该如何解决这个问题？

Answer 1

因为 .ui-growl 具有内联样式。所以 z-index:9999 不会覆盖 css。所以在这种情况下你必须使用 !important 。

So add !important to your css as below.

.ui-growl {
    z-index: 9999 !important;
}

注意：使用 !important 不是一个好习惯。我会建议你减少导航栏的 z-index ;)

如何更改 primefaces 咆哮组件的 z-index？

How to change z-index for primefaces growl component?

css

jsf

styles

growl

primefaces