Problem loading two modal panel

Question

I have two modal panel viz, panel1 and panel2.

Both the panel loads at the same time on page,

Requirement is to load panel1 over panel2. But, when page loads, it always causes panel2 over panel1, irrespective of code for model panel position on page.

I am using richfaces-3.3.2-SR1 version

Code goes here:

<rich:modalPanel id="panel1" resizeable="false" showWhenRendered="true">
  My data goes here
</rich:modalPanel>
<rich:modalPanel id="panel2" resizeable="false" showWhenRendered="true">
   <center>
       <h:graphicImage url="image.gif" />
   </center>
</rich:modalPanel>

Note: panel1 contains image

Thanks niks

Answer 1

Try setting z-index attribute

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Try

<rich:modalPanel id="panel1" resizeable="false" showWhenRendered="true" zindex="2000">
  My data goes here
</rich:modalPanel>

<rich:modalPanel id="panel2" resizeable="false" showWhenRendered="true" zindex="1000">
   <center>
       <h:graphicImage url="image.gif" />
   </center>
</rich:modalPanel>