How to change z-index for primefaces growl component?

Question

My problem is that, i have a fixed navbar on the top of the page, which has 1030 z-index value. The growl component shows behind the fixed navbar. I tried to override the z-index value for the growl like this (from a custom css file):
.ui-growl { z-index: 9999; }
Note: My custom css file is the last one which is loaded:

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

When i check the growl component in chrome it has an inline css style with a z-index value:

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

How should i solve this problem?

Answer 1

As .ui-growl has a inline style . So z-index:9999 will not override the css. So you have to use !important in this case.

So add !important to your css as below.

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

Note :Its not a good practice to use !important . I will suggest you to reduce the z-index of navbar ;)