下拉检查列表将Div向下推,而不是重叠

时间:2013-08-06 14:38:33

标签: css

我正在尝试将.NET DropDownCheckList控件设置为风格和功能上适合我的一个用户控件。

目前,我正在按如下方式处理DropDownCheckList实现(我计划将表结构转换为<div>,并在我弄清楚如何解决问题后将CSS样式转换为:)

<asp:Panel ID="CmbCkBxPanel" runat="server" Height="20px" Width="160px" BackColor="White">
    <asp:HiddenField ID="hfEmptyText" runat="server" />
    <table id="CmbCkBxTable" style=" background-color:White; table-layout: fixed; height: 20px; border-collapse: collapse; border-style: solid; border-width: 1px; border-color:Black;" cellspacing="0" cellpadding="0" width="100%" runat="server">

        <tr id="rowDD" style="border-style: none;background-color: White;" runat="server">
            <td style=" white-space:nowrap;" valign="middle"><asp:textbox id="DDTextBox" ReadOnly="true" style="cursor: default; vertical-align:middle;" runat="server" Width="100%" ToolTip="" BackColor="White" font-names="Arial" BorderColor="Transparent" BorderStyle="None" ></asp:textbox></td>
            <td id="colDDImage" width="16">
                <asp:Image ID="btnImage" runat="server" /></td>
        </tr>
    </table>
    <div style="z-index: 200; background-color: White; display:none; border-style:solid; border-width:thin; border-color:Black;" id="listdiv" runat="server">
        <asp:CheckBoxList ID="CBList" runat="server" width="100%" style=" text-align:left;  background-color:White;" RepeatColumns="1">
        </asp:CheckBoxList>
    </div>
</asp:Panel>

在页面加载时,控件看起来像这样(请注意我将其用于帐户和品牌过滤器):

enter image description here

然而,当我选择下拉列表时,它会向下推动整个div:

enter image description here

问题:是否可以重叠下面的div,而不是向下推蓝色容器div?或者这是我页面结构的问题吗?

如果您需要容器div和它们各自的CSS来帮助我排除故障,我可以包含这些。

谢谢!

1 个答案:

答案 0 :(得分:1)

如果您不希望div占用页面中的空格,则需要将其位置设置为绝对位置。