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

【问题标题】：How to change z-index for primefaces growl component?如何更改 primefaces 咆哮组件的 z-index？
【发布时间】：2017-03-31 11:42:22
【问题描述】：

我的问题是，我在页面顶部有一个固定的导航栏，它的 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 中检查咆哮组件时，它具有带有 z-index 值的内联 css 样式：

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

我应该如何解决这个问题？

【问题讨论】：

【解决方案1】：

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

所以添加 !important 到你的 CSS 如下。

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

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

【讨论】：