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

Question

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