Sobrepor componentes utilizando templates + facelets

Front-end
#1

galera é o seguinte, tô com uma dificuldade enorme aqui pra poder sobrepor dois richpanels no centro de uma página.

meu template.xhtml

       <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:ui="http://java.sun.com/jsf/facelets"> 
<head>
  <title><ui:insert name="title">Default title</ui:insert></title>
</head>

<body>

<div id="header">
    <ui:insert name="topo">        
    </ui:insert>
</div>

<div id="teste">
  <ui:insert name="content">  	     
  </ui:insert>
</div>

<div id="footer" >
   <ui:insert name="base">
   <center style="position:relative; top:20px">
   <rich:panel style="height:480px;width : 800px">
   
    <rich:toolBar style="position:absolute; top:450px; width : 785px "><h:outputText value="Todos os direitos reservados"      style="position:relative;left:280px"/></rich:toolBar>
   </rich:panel>
   </center>
   </ui:insert>
</div>

</body>
</html>

Esse aqui é o arquivo q faz a composição das duas páginas e teria q alinhar a tela de cadastro no centro , porém ela fica acima da primeita tela, não dá erro nem nada, só fica acima.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">

	<ui:composition template="/template.html">	
	
	<ui:insert name="footer">
	</ui:insert>
		
	<ui:define name="content">
	<div>
	      <center style="position:relative; top:20px">
          <rich:panel style="height:150px;width : 400px">
          <f:facet name="header">
          Write your own custom rich components with built-in AJAX support
          </f:facet>		
          <h:panelGrid columns="2">
          <h:outputText value="Nome" />
          <h:inputText value="" />
           <h:outputText value="Endereco" />
          <h:inputText value="" />          
          </h:panelGrid>                     
	 </rich:panel>
	 </center>
	 </div>
	 </ui:define>
	 </ui:composition>	
</html>

Afinal de contas, como é que eu faço para alinhá-las de forma que uma fique sobre a outra

#2