Пользовательское позиционирование для p:growl

Я использую компонент PrimeFaces 3.2 для отображения сообщений о лицах. Я хотел бы настроить его положение так, чтобы он отображался слева, а не справа.

Я попробовал следующее:

<h:head>
    <title>Facelet Title</title>
    <style type="text/css">
        .ui-growl {
            position:absolute;
            top:20px;
            left:20px;
            width:301px;
            z-index:9999;
        }
    </style>
</h:head>
<h:body>
    <h:form id="frm">
        <div id="add">
            <p:growl id="growl" showDetail="true" sticky="true" autoUpdate="true"/>
            <h:panelGrid columns="2" >
            ...

Но это не сработало. В чем я ошибся?