造型两个面板，第一个与第二个面板重叠

Question

我创建了两个面板。另一个小组。 但问题是第二个覆盖第一个但我想要相反。

 <h:form id="loginForm">        
         <img src="images/logo1.jpg"  alt="logo1"/>
        <p:growl id="msg" showDetail="true" life="3000" />
        <p:panel id="panel1" style=" margin-left:637px; width:300px ; background-
               image:url(images/panel1.PNG)" >

            <h:panelGrid id="loginPanel" columns="2" >



                <p:inputText id="username" value="#{loginBean.uname}" ></p:inputText>



                <h:outputText value="Password" />

                <p:password id="password" value="#{loginBean.password}"    
           feedback="false"></p:password>


                <p:commandButton action="#{loginBean.loginProject}" value="Login"    

                  update="loginForm" ajax="true"></p:commandButton>

            </h:panelGrid>

        </p:panel>
         <p:panel id="panel2" style="border-bottom-left-radius:20px ; margin-top:-65px;  
        font-family: arial;font-size: 211px;border:none ;background-image: 
          url(images/10.jpg);">
         </p:panel>
    </h:form>

位置是我想要的，但是登录面板被panel2隐藏