隐藏在 Bootstrap 导航栏后面的 jQuery 自动完成建议框 [英] jQuery autocomplete suggestion box hidden behind Bootstrap Nav bar
本文介绍了隐藏在 Bootstrap 导航栏后面的 jQuery 自动完成建议框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Bootstrap 4 主题，并且我已经向它添加了一个 jQuery 自动完成搜索框.我遇到的问题是建议框的顶部显示在导航栏后面.我怎样才能把它拉到最前沿?这是问题的一个工作示例:
I'm using the Bootstrap 4 theme and I've added a jQuery autocomplete search box to it. The problem I'm having though is the top of the suggest box is showing up behind the nav bar. How can I pull this to forefront? Here's the a working example of the problem: https://jsfiddle.net/phenkels/dwhzdg7b/11/. And a snippet of the HTML code:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="/">DASHBOARD</a>
</div>
<!-- Start Search Bar -->
<div class="ui-widget nav navbar-nav" id="search-wrapper">
<div class="input-group ">
<input id="tags" placeholder="Search..." autocomplete=off>
</div>
</div>
<!-- End Search Bar -->
</nav>
</body>
解决方案
Adding this CSS will increase the z-index:
#ui-id-1 {z-index: 9999;}
Fiddle: https://jsfiddle.net/7z7Lj6pw/
Preview
这篇关于隐藏在 Bootstrap 导航栏后面的 jQuery 自动完成建议框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
