如何选择select over parent div

Question

我创建了一个jsFiddle,它显示chosen-select控件被其父级"截断" div.即使overflow设置为y轴隐藏,它也会在单击chosen-select控件时显示滚动条.

在height这位家长的div固定和设置200px,并需要保持这种方式.

点击后如何查看chosen-select父母div？

编辑: jsFiddle更新更新CSS.如果我评论的div.content,它不会弄乱布局.

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

我需要为头部的位置做些什么吗？

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

发生了什么,当你向上滑动第三个时heading,chosen-select控制是可见的,直到它一直滑落.与其他标题不同,其中的标题input正在慢慢隐藏.

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>

如果/ else添加jQuery:

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