-1

エラー ポップアップ コントロールを別のポップアップ コントロールの上に設定しようとしています。z-index が解決策であることは知っていますが、何も機能しません。私はそれを任意/すべてのdivとクラスに適用しようとしました。私は何を間違っていますか？

マークアップ

<!-- Error Modal Form -->
    <asp:HiddenField ID="hideForModal" runat="server" />
    <ajaxToolkit:ModalPopupExtender runat="server" ID="ErrorModal" BehaviorID="modalPopupExtenderError"
        TargetControlID="hideForModal" PopupDragHandleControlID="PanelErrorOuter" PopupControlID="PanelErrorOuter"
        OkControlID="btnOk" BackgroundCssClass="modalBackground" DropShadow="False" Drag="true" >
    </ajaxToolkit:ModalPopupExtender>
    <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender3" runat="server" TargetControlID="PanelErrorInner">
    </ajaxToolkit:RoundedCornersExtender>
    <asp:Panel ID="PanelErrorOuter" runat="server" BackColor="Transparent" Style="display:none; ">
        <asp:Panel ID="PanelErrorInner" runat="server" BackColor="White" Width="480" Height="300"   >
            <div id="ErrorInputContainer" style=" position:absolute; z-index:80000 !important;" >
                <div>
                    <b>Error Code:</b></div>
                <asp:Label ID="lblErrorCode" runat="server" Text="Error Code"></asp:Label>
                <div>
                    <b>Error Message:</b></div>
                <asp:Label ID="lblErrorMessage" runat="server" Text="Error Message"></asp:Label>
                <div>
                    <b>Ex message:</b></div>
                <asp:Label ID="lblExMessage" runat="server" Text="Ex Message"></asp:Label>
                <br />
                <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('modalPopupExtenderError').hide(); return false;" />
                <div id="Acknowledge">
                    <asp:Button ID="btnOk" runat="server" Text="Ok" CssClass="Button" />
                </div>
            </div>
            <br />
        </asp:Panel>
    </asp:Panel>
    <!-- End Error Modal Form -->
4

1 に答える 1

1

Z-index は、配置された要素でのみ機能します。

z-index を機能させるには、ErrorInputContainer に position:absolute、position:relative、または position:fixed を指定する必要があります。

アップデート

絶対配置を使用することを選択した場合、「top:」および「left:」の配置は、最初の非静的先祖に相対的になることに注意してください。

すべての要素はデフォルトで「静的」な位置に設定されています。そのため、ポップアップをその要素に対して相対的に配置したい場合は、別の要素の css で「position:relative」を設定する必要があります。

例

<!-- Relative to parent div -->
<div style="position:relative;">
   <div style="position:absolute; top:0px; left:0px;">
   </div>
</div>

<!-- Relative to document window -->
<div>
   <div style="position:absolute; top:0px; left:0px;">
   </div>
</div>
于 2013-01-20T01:08:49.357 に答える