如何选择select over parent div

Question

我创建了一个jsFiddle，显示chosen-select控件被其父div“截断”。即使将overflow设置为隐藏y轴，它也会在点击chosen-select控件时显示滚动条。

此父height的{​​{1}}已修复并设置为div，并且需要保持这种状态。

点击后如何让200px查看父chosen-select？

编辑： jsFiddle更新了更多div。 如果我评论 CSS，则不会弄乱布局。

div.content控件现在位于第4个标题之上。在这个小提琴中我仍然可以选择chosen-select控件，但在我的应用程序中我不能。

我是否需要为标题的位置做些什么？

EDIT2： jsFiddle。我注意到，当标题1/2向上滑动时，chosen-select控件保持在其位置。为了记录，这不会发生在我的应用程序中。

当您向上滑动第3 chosen-select时，会发生什么情况，heading控制是可见的，直到它完全滑落为止。与其他标题不同，chosen-select正慢慢隐藏。

Answer 1

只需添加此CSS类：

添加边框以显示其他方框的定义是fixed。

div.content { position:absolute; }

查看此处：http://jsfiddle.net/SinisterSystems/e62Wu/3/

当您选择position：absolute时，您实际上是在告诉它忽略固定父div的约束并且能够绑定到框外。

这回答了这个问题吗？如果您愿意，我可以进一步详细说明。

编辑：

absolute positioning会将其从文档其余部分的流中删除，并将其视为不存在（它会显示您告诉它的位置，但不会修改其他元素流）。

尝试添加像这样的间隔：

<强> CSS：

div.filler {
    height:30px;
}

<强> HTML：

...
<div class="filler">
<div class="content">
     <select class="chosen-select">
     ...

FIDDLE：http://jsfiddle.net/e62Wu/7/

另一个编辑：

试试这个：

JS小提琴：http://jsfiddle.net/SinisterSystems/e62Wu/10/

添加CSS：

.hider {
    position:static;
}

在HTML中添加ID：

<div id="dropper" class="heading">header 3 <span class="glyphicon glyphicon-chevron-up pull-right"></div>

添加jQuery if / else：

    if($this.attr('id')==='dropper'){
       $('.content').toggleClass('hider').toggleClass('content');
    }

Answer 2

我添加了

border: 1px solid black;

到父箱，并删除“溢出：隐藏”，下拉列表保留在div前面。

这不是基于任何先前的知识，只是运气不好。我试图找出div的确切边界......哦，好吧。

总是......