Question

我正在使用Bootstrap 4主题，我已经添加了一个jQuery自动完成搜索框。我遇到的问题是建议框的顶部显示在导航栏后面。我怎样才能把它拉到最前沿？以下是问题的一个有效例子：https://jsfiddle.net/phenkels/dwhzdg7b/11/。还有一段HTML代码：

<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>

Answer 1

添加此CSS会增加z-index：

#ui-id-1 {z-index: 9999;}

小提琴：https://jsfiddle.net/7z7Lj6pw/

预览

隐藏在Bootstrap导航栏后面的jQuery自动完成建议框

1 个答案: