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

Question

我的问题是,我在页面顶部有一个固定的导航栏,它有1030个z-index值.咆哮组件显示在固定导航栏后面.我尝试覆盖这样的growl的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.

所以在下面添加!对你的css很重要.

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

注意:使用它不是一个好习惯!重要.我建议你减少导航栏的z-index;)