有没有办法把选择的 jQuery 插件放在前面？答案

【问题标题】：Is there a way to put Chosen jQuery Plugin always to front?有没有办法把选择的 jQuery 插件放在前面？
【发布时间】：2014-01-15 09:09:53
【问题描述】：

我正在尝试将 Chosen 插件与 jQuery Layout 和 jqgrid 等其他插件一起使用

没有选择我的选择框如下所示：

http://i.stack.imgur.com/x8qQv.png

与选择：

http://i.stack.imgur.com/XlSMz.png

它与 jQuery 布局重叠。

有没有办法让 Chosen 总是放在最前面？

我尝试了两个插件的不同 CSS 设置，但无济于事.. 请帮助弄清楚该怎么做。

HTML：

<div class="ui-layout-center"></div>
<div class="ui-layout-north">
    <div style="width: 250px; position:relative; z-index:99999">
        <select id="picker" style="width: 250px">
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
            <option value='5'>5</option>
            <option value='6'>6</option>
        </select>
    </div>  
</div>
<div class="ui-layout-south"></div>
<div class="ui-layout-east"></div>
<div class="ui-layout-west"></div>

jQuery:

$('#picker').chosen();
$('body').layout(
    { applyDefaultStyles: true }
);

到 JSFiddle 的链接：Fiddle

【问题讨论】：

尝试将position:relative; z-index:100 提供给下拉列表的父 div
@Era 将其发布在答案中，我一定会投票......！

标签： jquery css z-index jquery-chosen jquery-layout

【解决方案1】：

尝试将：position:relative; z-index:100 提供给下拉列表的父 div。或提供小提琴以获得更好的答案。

【讨论】：

是的，请提供一个小提琴以便更好地理解。
不幸的是你的决定不起作用..这是小提琴jsfiddle.net/yrd3w/2
我花了几天时间试图修复它，直到我找到你！谢谢！

【解决方案2】：

具有 z-index 的嵌套 div 永远不会高于父元素之外的元素。 This 文章解释得很好。您可以做的是将嵌套的 div 移到外面并在单击 .ui-layout-toggler-north 时切换可见性。看到这个JSFiddle

$('.ui-layout-toggler-north').click(function(){
    $('#chosen_select').toggleClass('hide');
});

注意：我在 .ui-layout-north div 中放置了一个选择元素，作为实际“选择的选择”元素的占位符。

【讨论】：

【解决方案3】：

试试这个 css 风格。

position: fixed; 
_position: absolute; 
z-index: 99; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
_height: expression(document.body.offsetHeight + "px");

这可以帮助您解决问题。 ^^

【讨论】：

它不工作。这是小提琴 jsfiddle.net/yrd3w/2
我测试你的例子..我知道你的问题是什么。你不能把它放在前面，因为你使用的
不同。也可以尝试 MODAL 或自动调整视角
的高度和宽度以查看下拉列表。