Question

你好，我正在使用选择性插件为我的网站创建标签一切都很好，除了下拉项目被我的其他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>

Answer 1

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

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

将此课程放在<select>标签内在此之后你应该重新调整元素，但问题可能会解决。

Answer 2

在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;  
}

Answer 3

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

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

Answer 4

Bootstrap框架及其运行正常

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

Answer 5

以上所有答案均不适用于我。我只需要在配置中设置dropdownParent属性即可。

dropdownParent: 'body'

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

注意-我正在使用Angular 7。

希望这对某人有帮助！

Answer 6

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

选择下降项目总是在前面

6 个答案: