Bootstrap 导航栏重叠 Google 放置自动完成下拉菜单

Question

我有一个导航栏，我想在上面添加一个地点搜索框。除了 google 位置提示框的一小部分被导航栏重叠（如下图所示）外，几乎一切正常。

我试过把输入框的z-index改成10或者2000或者90000好像都没有效果。

是否还有其他我遗漏的事情需要完成？

这里是 html:

<form class="navbar-form" role="search">
  <div class="col-sm-2">
    <div class="form-group has-feedback no-margin">
      <input aria-label="Place" type="text" class="form-control text-center" id="searchPlace" placeholder="Place" style="z-index:90000">
      <i class="map-pin-icon form-control-feedback"></i>
    </div>      
  </div>
</form>

Answer 1

更改自动完成 z-index 或将 pac-container 下移。

Bootstrap 的 navbars z-index 是 1000，navbar-fixed-top 是 1030。

自动完成 z-index 也是 1000，因此您必须增加它。

Answer 2

https://google-developers.appspot.com/maps/documentation/javascript/places-autocomplete#style_autocomplete

是一个很棒的资源，可以让您更改 css

中的自动完成元素样式

Answer 3

使 google class pac-container 的 z-index 大于导航栏。

.pac-container{
 z-index: 8000;
}