如何使选择的选择越过父div答案

【问题标题】：how to make chosen select go over parent div如何使选择的选择越过父div
【发布时间】：2014-01-22 00:18:43
【问题描述】：

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

此父级div 的height 已固定并设置为200px，需要保持这种方式。

如何让chosen-select 在被点击时超越父级div？

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

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

我需要为页眉的位置做些什么吗？

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

实际情况是，当您向上滑动第三个 heading 时，chosen-select 控件一直可见，直到它一直向上滑动。与其他标题不同，input 正在慢慢隐藏。

【问题讨论】：

【解决方案1】：

添加边框以显示您的另一个框的定义是保持fixed。

div.content { position:absolute; }

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

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

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

尝试像这样添加一个垫片：

CSS：

div.filler {
    height:30px;
}

HTML：

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

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');
    }

【讨论】：

您的方法似乎适用于 jsFiddle。但是，我无法让它在我的应用程序中工作。你可能知道有什么东西会阻止它工作吗？我正在检查元素，但在 CSS 块中的任何位置都看不到 div.content { position:absolute; }。
用你的完整 CSS 给我看看。
您没有关闭填充 div。是不是要包装content div？
哈哈@我。是的，它是：JSFiddle。我们只是建立一个块元素，它将伪造按钮的高度。
它似乎有效，但我在那些heading 上有雪佛龙。单击时，标题将向上或向下滑动。但是chosen-select 控件仍然在视线范围内，当它完全关闭时，它就被隐藏了。查看我的新小提琴，更新问题。

【解决方案2】：

我加了

border: 1px solid black;

到父框，并删除“溢出：隐藏”，下拉菜单停留在 div 前面。

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

总是有一些东西......

【讨论】：