Jquery 为什么选中的Select下拉列表位于footer DIV下面

我有以下HTML：

<!-- HEADER CONTENT -->
<div class="bodyMainContentHolder" style="min-height: 750px;">
    <div class="sectionfp group visOverflow">
            <div class="col span_1_of_3_cust span_pad_right">
                <div class="smallPadTop brClear setLeft">
                    <div class="setBold brClear">Select Language:</div>
                    <div class="chosenDDLHolder">
                        <asp:DropDownList ClientIDMode="Static" ID="ddlLanguage" CssClass="chosen-select setProvDDStyle" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- FOOTER CONTENT -->

如果页脚靠近dropdownlist，它将被剪裁。避免这种情况的唯一方法是使用

minheight

样式，但它会创建不必要的空白

以下是一个屏幕截图：

我如何修改代码，使dropdownlist始终位于任何其他DIV之上，并且仍然与周围DIV的流保持一致（不使用

绝对

位置）

JSFiddle：

HTML来源：

---

从

bodyMainContentHolder

中删除

溢出：隐藏的
。您的容器正在隐藏内部下拉div

使用我添加的
z-index
一路向上，但仍然是一样的：/看看这篇文章，也许它会对你有所帮助，如果您在使用
z-index
时遇到困难，请添加
z-index
并定位到整个页眉
bodyMainContentHolder
，并确保页脚上的z-index较低。创建选择后，您需要查看html。不要忘记这是在客户端发生的，您的css需要与Selected在修改文档时所做的相关。特别是，看看
.selected container
，这里是JSFiddle（不起作用，只是要显示的代码）：JSFiddle.net/nrkpqbx6问题是它仍然在页脚下，还是被视口底部剪裁？它们不是都一样吗？问题的屏幕截图仍然在那里：/Ok，在你原来的小提琴中，你没有在
bodyMainContentHolder
周围添加包装，它看起来是
bodyContent
，还需要删除它的
overflow:hidden
。我删除了这两个，并将
overflow:visible
放在那里，但仍然没有任何内容。
.chosenDDLHolder {
    width: 100%;
}
.setBold {
    font-weight: bold;
}
.setLeft {
    text-align: left;
}
.brClear {
    clear: both;
}
.smallPadTop {
    padding: 15px 0 0 0;
}
/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}
.span_1_of_3_cust {
    width: 28.2%;
}
.span_pad_right {
    padding-right: 1%;
}
.bodyMainContentHolder {
    width: 98%;
    overflow: hidden; /* tried changing this to "overflow: visible" but didn't work */
    margin: 0 auto;
    padding: 2% 0 2% 0;
}
.sectionfp {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    width: 100%;
}
/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}
.visOverflow {
    overflow: visible;
}