styling two panels the first overlap the second one

Question

I created two panels. a panel on the other. but the problem that the second cover the first one but I want the opposite.

 <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>

position is as I want but I have the login panel is hidden by panel2