Question

我的DIV中有一个SELECT选项：

<div class="accordion_example1" style="width: 305px; margin: 0 auto;">
    <!-- Section 1 -->
    <div class="accordion_in acc_active" style="border: 1px solid #ccc; position: relative; z-index: 10; margin-top: -1px; overflow: hidden;">
        <div class="acc_head" style="position: relative;padding: 10px; font-size: 14px; display: block; cursor: pointer; color: #000000; background: url(header.gif);">Basic Search</div>
        <div class="acc_content" style="background: #cccccc; text-align: left; height: 190px;">
            <div id="icontent" style="width: 100%; height: 90%; text-align: center; padding-top: 5%;">
                <div style="width: 250px; margin: 0 auto;">
                                            <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                                                <ContentTemplate>
                                                    <asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ClientIDMode="Static" ID="ddlMain" style="width: 245px;" class="default" runat="server" AppendDataBoundItems="true">
                                                        <asp:ListItem Text="FOR PHYSICIAN" Value="0" Selected="True" />
                                                        <asp:ListItem Text="FOR LOCATION" Value="1" />
                                                        <asp:ListItem Text="FOR SPECIALTY" Value="2" />
                                                        </asp:DropDownList>
                                                        <br /><br />
                                                    <asp:DropDownList ClientIDMode="Static" ID="ddlDrillDown" style="width: 245px; z-index: 9999999999999;" class="default" runat="server" AppendDataBoundItems="true">
                                                    </asp:DropDownList>
                                                </ContentTemplate>
                                                <Triggers>
                                                    <asp:AsyncPostBackTrigger ControlID="ddlMain" />
                                                </Triggers>
                                            </asp:UpdatePanel>
                                        </div>
                                        <br /><br />
                                        <div style="width: 250px; margin: 0 auto;">
                                            <asp:HyperLink class="loginButton"  style="padding: 10px; float: right;" runat="server" ID="bSearchSubmit" ClientIDMode="Static" Text="SEARCH" NavigateUrl="#" />
                                        </div>
                                    </div>
                                </div>
                            </div>

如何让选项显示在容器上方，以便它不会阻止它？

Answer 1

<强> DEMO

这是因为：

<div class="accordion_in" style="border: 1px solid #ccc; position: relative; /* z-index: 10; */ margin-top: -1px; overflow: hidden;">

在外部容器中，你有z-index，它总是浮动在下拉菜单的顶部。

此外，您还隐藏了溢出，这会剪切下拉菜单。

覆盖这些样式后，它应该可以正常工作。

.accordion_in {
   z-index: inherit !important;
   overflow: visible !important;
}

如何使SELECT选项出现在DIV容器之外

1 个答案: