无法在ASP.NET中的另一个前面设置一个div

我正在创建一个简单的登录系统，但看起来div彼此交互。Div2排在Div1的前面：

红色div后面有一些标签，其余的文本按钮。

我的ASP.NET代码：

<div id ="LoginPannel"> /* <-- this is div 1*/
    <asp:Button ID="Button1" runat="server" Text="Login" OnClick="Button1_Click1" />
    <asp:Label ID="Label1" runat="server" Text="Username" Font-Bold="True" ></asp:Label>
    <asp:Label ID="Label2" runat="server" Text="Password" Font-Bold="True"></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:Label ID="Label3" runat="server" Text="Login"></asp:Label>
    <asp:Button ID="Button3" runat="server" Text="Having Problems?" OnClick="Button3_Click" />


</div>

<div id="topForm"> /* <-- this is div 2 */


</div>

而2 divs后面的代码是这个。

CSS代码：

#LoginPannel{
   border-style: none;
   background-color:   #263540;
   position:absolute; 
   top: 42%;
   left:25%;
   width:268px;
   height: 115px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
    border-radius: 10px;
}

#topForm {
    position: absolute;
    top: 0%;
    left:0;
    z-index:0;
    width: 500px;
    height:500px;
    background-color: red;
}