为什么叠加层覆盖了新的div

Question

我在ASP.NET应用程序中有一个链接按钮，如下所示。当我点击链接按钮时，它调用Javascript函数，显示另一个div文件和叠加层。但是，在这种情况下，叠加层出现在div上而不是在div下面。什么可能出错？我已经从另一种形式复制了这个工作正常。

<asp:LinkButton Text='<%# Eval("CorrectiveActionName") %>'
                                    OnClientClick='<%# Eval("ProductionID", "return ShowCorrectiveActionDiv({0});") %>'
                                    runat="server" OnClick="lnkbtnCorrectiveAction_Click"
                                    CausesValidation="false" ID="lnkbtnCorrectiveAction">
                    </asp:LinkButton>

ShowCorrectiveActionDiv的javascript是

function ShowCorrectiveActionDiv(objectid) {
    $("#divCorrectiveActionStatusChild").show();
    $(".overlay").show();
    var productionIdValue = document.getElementById("ContentPlaceHolder1_hdnProductionDIVID");
    productionIdValue.value = objectid;
    return true;
}

重叠类的CSS是

.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #083371;
    opacity: 0.5;
    filter:alpha(opacity=50);
}

母版页中的叠加div是

<div class="overlay" runat="server"></div>