How to change Growl’s position on the screen?

Question

I want to change the position of Growl but apply in CSS and at the time does not change anything in the position when it appears on the screen, I want to center for example.

In the template:

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Drogaria</title>
    <h:outputStylesheet library="css" name="estilos.css" />
</h:head>
<h:body>
    <p:growl id="msgGlobal" life="3000" />
...
</h:body>

In css:

@CHARSET "ISO-8859-1";

.ui-growl{
    left:20px;
}

In xhtml

<p:commandButton value="Gravar" actionListener="#{MBFabricante.novo}" 
                        oncomplete="PF('dlgFabNovo').hide();" 
                        update=":frmFabListagem:tblFabricantes :msgGlobal" />

Answer 1

Use the absolute, try how it worked for me:

.ui-growl {
    position: absolute;
    top: 20px;
    left: 40%;
}