Panel is not coming on top, Z-index is not working for panels

I have two panels in my asp.net project. Each having controls of their own. The 2nd panel is contained within the 1st panel. Even if i give lower z-index for the 2nd panel, it is always visible above the 1st panel. Please find code below.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Panelshow.aspx.vb" Inherits="paneltest.Panelshow" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
          .panelbg {
            left: 0;
            top: 0;
            width: 1000px;
            height: 700px;
            background-color: palegreen;
               z-index:300;
           position:relative;
         
        }
          .pan2{
              top: 200px;
              left : 200px;
   background-color:aqua;
               z-index:1;
           position:relative;
          }

    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel3" CssClass="panelbg" runat="server">
                <asp:Button ID="Button2" runat="server" Text="Button" />
            
            <asp:Panel ID="Panel2" CssClass="pan2" runat="server">
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </asp:Panel>
            </asp:Panel>
        </div>
    </form>
</body>
</html>

Solution

since you wish the two panel stacking on top of each other. both panel should stand on the same level, not one within another. for example:

<div>
    <asp:Panel ID="Panel3" CssClass="panelbg" runat="server">
        <asp:Button ID="Button2" runat="server" Text="Button" />
    </asp:Panel>

    <asp:Panel ID="Panel2" CssClass="pan2" runat="server">
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </asp:Panel>
</div>

Then your css will make both elements have the position of absolute for the z-index to take effect:

.panelbg {
    left: 0;
    top: 0;
    width: 1000px;
    height: 700px;
    background-color: palegreen;
    z-index: 300;
    position: absolute;
}

.pan2 {
    top: 200px;
    left: 200px;
    background-color: aqua;
    z-index: 1;
    position: absolute;
}