有没有办法将Chosen jQuery插件始终放在前面？

Question

我正在尝试使用Chosen插件和其他一些插件,如jQuery Layout和jqgrid

没有选择我的选择框看起来像这样:

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

并选择:

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

它与jQuery Layout重叠.

有没有办法让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:小提琴

Answer 1

尝试给:position:relative; z-index:100下拉列表的父div.或提供一个小提琴来获得更好的答案.

Answer 2

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

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

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