css - 如何更改 primefaces growl 组件的 z-index？

Question

我的问题是，我在页面顶部有一个固定的导航栏，它有 1030 z-index 值。 growl 组件显示在固定导航栏后面。我试图像这样覆盖 growl 的 z-index 值(来自自定义 css 文件):
.ui- growl {
z-指数: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 ;)