2

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?

gfazek
  • 73
  • 1
  • 6

1 Answers1

7

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 ;)

Sahil Dhir
  • 4,162
  • 1
  • 13
  • 33
  • i read it's not a good practice to use this, so i tried to avoid it. But it works with that, thank you! – gfazek Mar 31 '17 at 11:49
  • yeah I know that too . So if you have control over navbar reduce its z-index :D But if this answer helped you please accept and upvote.. happy coding ;) – Sahil Dhir Mar 31 '17 at 11:52
  • i tried to upvote but it says i have to wait some minutes to accept an answer after posting the question. you'll get it soon ;) – gfazek Mar 31 '17 at 11:55
  • as noted by Sahil Dhir, I set my navbar z-index to auto and it worked. – Abdullah Apr 18 '18 at 12:22