<分区>
javascript - 固定导航栏顶部的自动完成列表
为了固定navbar包含搜索 <input>查询 Google 位置 API 以获取地址列表的元素我这样做了:
<nav id="inforisq-navbar" class="navbar navbar-fixed-top">
<div id="menu-inforisq" class="container">
<div class="navbar-header navbar-collapse navbar-responsive-collapse collapse">
<a href="/" class="navbar-brand"><img src="/portail/images/logo_inforisq_2015.png" height="40"></a>
</div>
<div id="search-container" class="col-md-6 col-md-offset-1 col-sm-5 col-sm-offset-1">
<div class="row">
<div class="input-group">
<input name="searchbar" id="searchbar" class="form-control ui-autocomplete-input" autocomplete="on" value="" placeholder="Saisissez une adresse postale ou des coordonnées GPS.">
<div class="input-group-addon"><a id="validation" onclick="validSearch();"><span class="glyphicon glyphicon-search"></span></a></div>
</div>
</div>
</div>
<ul class="nav navbar-nav navbar-right hidden-xs">
<li><a href="#" role="button"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span></a></li>
<li><a href="#" role="button">MyInforisq <span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#" id="drop2">
<span class="glyphicon glyphicon-th-large"></span>
</a>
<ul id="dropdown-services" aria-labelledby="drop2" class="dropdown-menu">
<li><span aria-hidden="true" class="glyphicon glyphicon-fire"></span><span class="services-class">Etat des risques</span></li>
<li><span aria-hidden="true" class="glyphicon glyphicon-duplicate"></span><span class="services-class">Renseignements d'urbanisme</span></li>
<li><span aria-hidden="true" class="glyphicon glyphicon-home"></span><span class="services-class">Etude d'opportunité</span></li>
<li><span aria-hidden="true" class="glyphicon glyphicon-duplicate"></span><span class="services-class">Valeur vénale</span></li>
<li><span aria-hidden="true" class="glyphicon glyphicon-home"></span><span class="services-class">Audit de parc immobilier</span></li>
<li><span aria-hidden="true" class="glyphicon glyphicon-home"></span><span class="services-class">Hypothèques</span></li>
<li><span aria-hidden="true" class="glyphicon glyphicon-home"></span><span class="services-class">Plan de réseau</span></li>
<li><span aria-hidden="true" class="glyphicon glyphicon-euro"></span><span class="services-class">Diagnostics immobiliers</span></li>
<li><span aria-hidden="true" class="glyphicon glyphicon-euro"></span><span class="services-class">Expertises immobilières</span></li>
</ul>
</li>
</ul>
</div>
</nav>
结果如下:
如您所见，自动完成列表位于固定的 navbar 后面。我想知道如何把它放在 css 上面。
[解决方案]
只需将 z-index > 1030 添加为:.pac-container{ z-index: 1031;}
最佳答案
我不知道你的 css 是什么样的，但你可以尝试在你的自动完成列表中添加一个 z-index。
.autoCompleteList{
z-index:300;
}
关于javascript - 固定导航栏顶部的自动完成列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33635618/