Alert component

Question

Hello,
I have a table where the user can choose items to it and add them for later viewing. The last column of the table is linked to an action which adds the row to a java bean. I also have two different alert (which use the Alert component) to notify the user when the item is missing some info, or if the item is already added to the basket. I want the table to be positioned a little lower in the page when the alert is visible. This is why, in the first place the alert is setVisible(false), and when one the cases above happens it becomed setVisible(true). But the alert components are positioned a lot higher than the table component..
Code:
<webuijsf:alert binding="#{licencewizard$BasicResults.missingInfoAlert}" detail="#{msg.Missing_Alert_info}" id="missingInfoAlert"
style="left: 219px; top: 21%; position: relative; width: 241px" summary="#{msg.Missing_Alert_title}"/>
<webuijsf:alert binding="#{licencewizard$BasicResults.dupAlert}" detail="#{msg.Alert_info}" id="dupAlert"
style="left: 219px; top: 21%;
position: relative; width: 241px" summary="#{msg.Alert_title}"/>
<webuijsf:table binding="#{licencewizard$BasicResults.resultTable}" id="resultTable" lite="true" paginationControls="true"
style="left: 10%; top: 15%; position: relative" title="#{msg.SearchResultsBasic}" width="600">
<webuijsf:tableRowGroup aboveColumnFooter="true" binding="#{licencewizard$BasicResults.tableRowGroup1}"
emptyDataMsg="#{msg.No_Results_Msg}" id="tableRowGroup1" rows="10"
sourceData="#{licencewizard$BasicResults.osdelbooksDataProvider}" sourceVar="currentRow">
<webuijsf:tableColumn align="center" binding="#{licencewizard$BasicResults.tableColumn1}"
headerText="#{msg.SearchResults_tc1}" id="tableColumn1" style="#{licencewizard$BasicResults.columnStyle}" valign="middle">
<webuijsf:staticText binding="#{licencewizard$BasicResults.staticText1}" id="staticText1" text="#{currentRow.value['Titles1']}"/>
</webuijsf:tableColumn>
<webuijsf:tableColumn align="center" binding="#{licencewizard$BasicResults.tableColumn2}"
headerText="#{msg.SearchResults_tc7}" id="tableColumn2" style="#{licencewizard$BasicResults.columnStyle}"
valign="middle" width="109">
<webuijsf:staticText binding="#{licencewizard$BasicResults.staticText2}" id="staticText2" text="#{currentRow.value['Name']}"/>
</webuijsf:tableColumn>
<webuijsf:tableColumn align="center" binding="#{licencewizard$BasicResults.tableColumn3}"
headerText="#{msg.SearchResults_tc4}" id="tableColumn3" style="#{licencewizard$BasicResults.columnStyle}" valign="middle">
<webuijsf:staticText binding="#{licencewizard$BasicResults.staticText3}" id="staticText3" text="#{currentRow.value['Ekdotis']}"/>
</webuijsf:tableColumn>
<webuijsf:tableColumn align="center" binding="#{licencewizard$BasicResults.tableColumn7}"
headerText="#{msg.SearchResults_tc6}" id="tableColumn7" style="#{licencewizard$BasicResults.columnStyle}" valign="middle">
<webuijsf:staticText binding="#{licencewizard$BasicResults.staticText7}" id="staticText7" text="#{currentRow.value['Etos1st']}"/>
</webuijsf:tableColumn>
<webuijsf:tableColumn align="center" binding="#{licencewizard$BasicResults.tableColumn8}"
headerText="#{msg.SearchResults_tc2}" id="tableColumn8" style="#{licencewizard$BasicResults.columnStyle}" valign="middle">
<webuijsf:staticText binding="#{licencewizard$BasicResults.staticText8}" id="staticText8" text="#{currentRow.value['OsdelCat']}"/>
</webuijsf:tableColumn>
<webuijsf:tableColumn align="center" binding="#{licencewizard$BasicResults.tableColumn9}" headerText="ISBN"
id="tableColumn9" style="#{licencewizard$BasicResults.columnStyle}" valign="middle" width="53">
<webuijsf:staticText binding="#{licencewizard$BasicResults.staticText9}" id="staticText9" text="#{currentRow.value['ISBN']}"/>
</webuijsf:tableColumn>
<webuijsf:tableColumn align="center" binding="#{licencewizard$BasicResults.tableColumn10}"
headerText="#{msg.SearchResults_tc3}" id="tableColumn10" style="#{licencewizard$BasicResults.columnStyle}"
valign="middle" width="78">
<webuijsf:staticText binding="#{licencewizard$BasicResults.staticText10}" id="staticText10" text="#{currentRow.value['Selides']}"/>
</webuijsf:tableColumn>
<jguard:hasPrincipal principals="user">
<webuijsf:tableColumn align="center" binding="#{licencewizard$BasicResults.tableColumn4}"
headerText="#{msg.SearchResults_tc9}" id="tableColumn4" rowHeader="true"
style="#{licencewizard$BasicResults.columnStyle}" valign="middle">
<webuijsf:button actionExpression="#{licencewizard$BasicResults.addToLicence_action}"
binding="#{licencewizard$BasicResults.addToLicence}" id="addToLicence" imageURL="/resources/download.png"
mini="true" onMouseOut="document.getElementById('form1:academicBubble').close();" onMouseOver="document.getElementById('form1:academicBubble').open(event);"/>
</webuijsf:tableColumn>
</jguard:hasPrincipal>
</webuijsf:tableRowGroup>
</webuijsf:table>
Basically, I think it has something to do with the position:relative but I am not sure how this thing works ..

Answer 1

anyone ??