选择放置项目以始终排在前面答案

【问题标题】：selectize drop item to get in front always选择放置项目以始终排在前面
【发布时间】：2016-02-13 00:17:10
【问题描述】：

大家好，我正在使用 selectize 插件为我的网站创建标签，一切都很好，只是下拉项目与我的其他 div 重叠。

我希望它们表现得像选择项一样，它们是绝对的并且总是在 frnt 中。

我尝试使用绝对和 z-index 进行定位，但没有帮助如果你能给我一些关于插件的建议，那就太好了。

     <script src="tags/selectize.js"></script>
    <link rel="stylesheet" href="tags/selectize.default.css"/>
 <div class="control-group">
                <select id="<?=$getid_i?>" multiple name="dept[]" class="demo-default" >
                    <option value=""><?=$placehol?></option>
                    <?php if ($tagwhats =='depts'){
                 // something to get ....
                } else if($tagwhats =='skills'){
                 // something here ...
                } ?>
                </select>
            </div>
 <script>
                var eventHandler = function(name) {
                return function() {
                    console.log(name, arguments);
                    $('#log').append('<div><span class="name">' + name + '</span></div>');
                };
            };
            var $select = $('#'+"<?=$getid_i?>").selectize({
                create          : true,
                onChange        : eventHandler('onChange'),
                onItemAdd       : eventHandler('onItemAdd'),
                onItemRemove    : eventHandler('onItemRemove'),
                onOptionAdd     : eventHandler('onOptionAdd'),
                onOptionRemove  : eventHandler('onOptionRemove'),
                onDropdownOpen  : eventHandler('onDropdownOpen'),
                onDropdownClose : eventHandler('onDropdownClose'),
                onFocus         : eventHandler('onFocus'),
                onBlur          : eventHandler('onBlur'),
                onInitialize    : eventHandler('onInitialize'),
                });
                </script>

【问题讨论】：

我正在做的只是在一个预先创建的 div 中调用它，当下拉显示它应该越过 div 并显示时，我想要 300px 宽度和 40px 高度。现在它显示但它被隐藏，因为主 div 的高度仅为 40px

标签： jquery html css selectize.js

【解决方案1】：

忘掉 selectize.css 类吧。对我有用的是：
使用以下内容创建另一个类：

.myNewClass {
   position: absolute !important;
   z-index: 999;
}

把这个类放在你的<select>标签中。
在此之后，您应该重新调整元素，但问题可能会得到解决。

【讨论】：

【解决方案2】：

以上答案都不适合我。我只需要在我的配置中设置dropdownParent 属性。

dropdownParent: 'body'

https://github.com/selectize/selectize.js/blob/master/docs/usage.md

注意 - 我正在使用 Angular 7。

希望这对某人有所帮助！

【讨论】：

这应该是公认的答案，而且效果很好。

【解决方案3】：

在 selectize.css 中，您可以更改下拉列表的 z-index。以下适用于我的网站：

.selectize-dropdown {
  position: absolute;
  z-index: 10000; /* adjust as necessary */
  border: 1px solid #d0d0d0;
  background: #ffffff;
  margin: -1px 0 0 0;
  border-top: 0 none;  
}

【讨论】：

对不起，但对我不起作用，我正在做的只是在我想要的 300 像素宽度和 40 像素高度的预先创建的 div 中调用它，当下拉显示它应该越过 div 并显示时。现在它显示但它被隐藏，因为主 div 的高度仅为 40px
这是没用的，因为当 position 属性的值为 'absolute' 时，z-index 属性会被忽略。

【解决方案4】：

Bootstrap 框架，它运行良好

.selectize-dropdown {
    z-index: 9999!important;
}

【讨论】：

【解决方案5】：

如果您使用 bootstrap 3 或 bootstrap 2，请不要忘记加载 css。您可以找到 css 文件 here。请相应地加载您的 CSS。

【讨论】：

【解决方案6】：

我正在使用 UIKit 3.x，这对我有用

.selectize-dropdown-content {
    z-index: 999;
    background: white;
    border: 1px solid #e5e5e5; // this is optional
}

【讨论】：