z-index not working autocompleter under tabs - html

Question

I have a problem with my autocompleter. If I resize my site then the autocompleter is under the tabs even I have z-index on it.
How can I fix this problem? I tried many things for example change the class autocompleter to absolute then it is over the tabs but the position changes. If I resize again to desktop size then it is not working.
Here is my css for the autocompleter:
.search_box{ float: left;position: relative;width:100%;}
.search-input-fields{float: left;width:100%; position: relative; }
.search-btn-wrap{float: left;width:100%;}
.search_box .search-input-fields input{float:left; height: auto; padding:12px 20px 12px; border-radius:0; border: 1px solid #eeeeee; background-color:#ffffff; box-shadow: none; font-weight: 600; color:#000000; }
.search_box .search-input-fields select{float:left; padding:12px 20px; border-radius:0; border: 1px solid #eeeeee; border-right:none; background-color:#ffffff; box-shadow: none; font-weight: 600; }
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Chrome- and Safari-specific CSS here*/
.search_box .search-input-fields select{float:left; -webkit-appearance: none;
background: url("/assets/fonts/selectdown.png") 96% / 15% no-repeat #eee; background-size:15px; border-radius:0; border: 1px solid #eeeeee; background-color:#ffffff; box-shadow: none; font-weight: 600; }
}
.search_box .search-btn-wrap input[type="submit"]{
width: 100%;border-radius:0;line-height: normal;padding-bottom: 10px;padding:14px;background-color: #ff5a5f;
border:none;color: #ffffff;margin-bottom: 20px;
}
.search_box .location{ width:100%; float:left;position: relative;}
.search_box .guest{ width:100%; color:#909090}
.search_box select:disabled {
background: #f5f5f5!important;
}
div.autocomplete {
background-color: #f5f5f5;
box-shadow: 0 1px 5px rgba(50, 50, 50, 0.2);
left: 15px;
margin-top: 0;
position: absolute;
right: 15px;
top: 100%;
width: auto;
z-index: 999999999!important;
}
.search_box .location div.autocomplete{
left:0;
right: 0;
}
.search_box .location ul.autocomplete li .glyphicon{
display: block;
left: 10px;
position: absolute;
top: 13px;
}
.search_box .location ul.autocomplete li{
padding-left: 40px;
position: relative;
line-height: 1.7;
}
.search_box .location span.search-close-icon{
top:14px;
}
ul.autocomplete{
padding: 0;
list-style: none;
/*border:1px solid #c4c4c4;*/
margin:0;
}
ul.autocomplete li{border-top:1px solid #e6e6e6; padding:10px; line-height: 1; color: #999999;cursor: pointer }
ul.autocomplete li .bold{color:#333333; font-weight: 600;display:inline-block; vertical-align: top; line-height: 1.7; }
ul.autocomplete li a{ text-decoration: none;color:inherit; }
ul.autocomplete li .glyphicon { font-size: 20px; line-height: 1; margin-right: 10px; color:#999999; }
ul.autocomplete li:hover{background-color:#00bce4;color:#ffffff; }
ul.autocomplete li:hover a{ text-decoration: none }
ul.autocomplete li:hover .bold{ color: #ffffff; }
ul.autocomplete li:hover .glyphicon {color:#ffffff; }
.search-input-fields .col-sm-6,.search-input-fields .col-sm-3,.search-input-fields .col-sm-2, .search-input-fields .col-sm-4{
position: initial; padding: 0; margin-bottom: 20px;border-right:1px;
}
.location-inner-wrap { float: left; position: relative; width: 100%; }
span.search-close-icon {
color: #00bce4;
cursor: pointer;
display: none;
height: 30px;
position: absolute;
right: 10px;
top: 10px;
width: auto;
z-index: 999999;
}
/*.col-sm-4{padding-right:0!important;}*/
#media (max-width: 767px){
.search-input-fields .col-sm-6,.search-input-fields .col-sm-3,.search-input-fields .col-sm-2, .search-input-fields .col-sm-4{float: left;width: 100%;position: relative; padding-right:15px; padding-left:15px; border-right:1px;}
div.autocomplete {margin-top: 0; width:100%}
}
Here is my css for tabs:
.tabs-left>li:hover{
border-bottom-color:transparent!important;
}
li.active span.round-tabs.one {
background: #fff !important;
border: 2px solid #8EC73F;
color: #8EC73F;
z-index:0;
}
li.active span.round-tabs.two {
background: #fff !important;
border: 2px solid #00bce4;
color: #00bce4;
}
li.active span.round-tabs.three {
background: #fff !important;
border: 2px solid purple;
color: purple;
}
.glyphicon-th:hover{
color:#8EC73F;
}
.glyphicon-bullhorn:hover{
color:#00bce4;
}
.login{
margin-top:auto;
}
span.round-tabs {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: relative;
left: 0;
text-align: center;
font-size: 25px;
}
footer{
width:70%;
}
.text-muted{
width: 60%;
float: right;
}
.glyphicon-filter{
cursor: pointer;
}
HTML
<div class="sticky" style="background-color:#F5F5F5;">
<login (roleSet)='setRole($event)' (loginState)='loginState($event)' (userIdSet)='setUserId($event)' (refreshPage)='changeQuery(1)'
[logoutFlag]='logoutFlag'></login>
<div class="load" *ngIf="loading"></div>
<div class="search" style=" background-color:#FFFFFF;">
<div class="container-fluid " style=" background-color:#FFFFFF;">
<div class="row">
<div class="col-md-2 logo">
</div>
<div class="col-md-10 searchfilter">
<div class="form-section">
<div class="row">
<form id="searchfield">
<div class="search_box">
<div class="search-input-fields">
<div class="col-sm-4">
<div class="location">
<div class="location-inner-wrap">
<input type="text" class="guest" [(ngModel)]="place_search" [ngModelOptions]="{standalone: true}" (keyup)="search(place_search)"
placeholder="z.B. Berlin oder Ballonfahrt Berlin" focus="true">
<span class="search-close-icon"><i (click)="emptyAutocomplete()" class="search-close-icon glyphicon glyphicon-remove"></i></span>
</div>
<div class="autocomplete">
<ul class="autocomplete">
<li *ngIf="noplacefound== true">No records found.</li>
<li *ngFor="let place of items" (click)="selectPlace(place)">
<i *ngIf="place.is_city== true" class="glyphicon glyphicon-map-marker"></i>
<i *ngIf="place.is_city== false" class="glyphicon glyphicon-flag"></i>
<span class="bold">{{place.placename}}</span> {{place.country}}
</li>
</ul>
</div>
</div>
</div>
<div *ngIf="!toggleFilter">
<div class="col-sm-2">
<select [(ngModel)]="miles" [ngModelOptions]="{standalone: true}" class="miles_select guest" (change)="changeRange($event)">
<option value="20">20 km</option>
<option value="50">50 km</option>
<option value="100">100 km </option>
<option value="200">>200 km</option>
</select>
</div>
<div class="col-sm-3">
<select class="guest categorydd" [(ngModel)]="category_search" [ngModelOptions]="{standalone: true}" (ngModelChange)="changeCategory($event)">
<option value="Alle Kategorien" >Alle Kategorien</option>
<option *ngFor="let x of countedCategory " value="{{x._id}}"> {{x._id}} ({{x.total}})</option>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Alle Kategorien'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<option label="Unterkategorie" selected>Unterkategorie</option>
<optgroup label="Fliegen & Fallen" >
<option value="Fallen & Springen">Fallen & Springen</option>
<option value="Fliegen mit Motor">Fliegen mit Motor</option>
<option value="Gleiten & Schweben">Gleiten & Schweben</option>
<option value="Jets & Weltraum">Jets & Weltraum</option>
</optgroup>
<optgroup label="Motorpower">
<option value="Geländewagen">Geländewagen </option>
<option value="Ketten & Schienen">Ketten & Schienen</option>
<option value="Motorräder">Motorräder</option>
<option value="Oldtimer">Oldtimer </option>
<option value="Quads & Spaßmobile">Quads & Spaßmobile </option>
<option value="Rennwagen">Rennwagen</option>
<option value="Schneefahrzeuge">Schneefahrzeuge</option>
<option value="Traumautos">Traumautos </option>
</optgroup>
<optgroup label="Essen & Trinken">
<option value="Essen gehen">Essen gehen</option>
<option value="Kochkurse">Kochkurse</option>
<option value="Wein, Bier & Spirituosen">Wein, Bier & Spirituosen</option>
<option value="Kaffee & Schokolade">Kaffee & Schokolade</option>
</optgroup>
<optgroup label="Abenteuer & Sport">
<option value="Sport im Sommer">Sport im Sommer</option>
<option value="Sport im Winter">Sport im Winter</option>
<option value="Action & Stunts">Action & Stunts</option>
<option value="Wildnis">Wildnis</option>
</optgroup>
<optgroup label="Wellness & Gesundheit">
<option value="Verwöhnen & Erholen">Verwöhnen & Erholen</option>
<option value="Beauty & Styling">Beauty & Styling</option>
<option value="Fitness & Ernährung">Fitness & Ernährung</option>
<option value="Körper & Seele">Körper & Seele</option>
</optgroup>
<optgroup label="Kunst, Kultur & Lifestyle">
<option value="Dating, Liebe & Romantik">Dating, Liebe & Romantik</option>
<option value="Kunst & Handwerk">Kunst & Handwerk</option>
<option value="Lifestyle">Lifestyle</option>
<option value="Musik & Tanz">Musik & Tanz</option>
<option value="Vor der Kamera">Vor der Kamera</option>
<option value="Vor der Kamera">Wedding</option>
</optgroup>
<optgroup label="Wasser & Wind">
<option value="Boot">Boot</option>
<option value="Kajak">Kanu</option>
<option value="Rafting">Rafting</option>
<option value="Segeln">Segeln</option>
<option value="Surfen">Surfen</option>
<option value="Tauchen">Tauchen</option>
<option value="Wasserspass">Wasserspass</option>
</optgroup>
<optgroup label="Reisen">
<!-- <option value="Festivals">Festival</option> -->
<option value="Alpin">Alpin</option>
<option value="Hotel">Hotel</option>
<option value="Kultur">Kultur</option>
<!-- <option value="Nachtleben">Nachtleben</option> -->
<option value="Romantik">Romantik</option>
<option value="Staedtetrips & Ausfluege">Staedtetrips & Ausfluege</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Fliegen & Fallen'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Fliegen & Fallen">
<option value="Fallen & Springen">Fallen & Springen</option>
<option value="Fliegen mit Motor">Fliegen mit Motor</option>
<option value="Gleiten & Schweben">Gleiten & Schweben</option>
<option value="Jets & Weltraum">Jets & Weltraum</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Motorpower'">
<select id="scrollable-menu" class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" [ngModelOptions]="{standalone: true}"
(ngModelChange)="changeSpecCat($event)">
<optgroup label="Motorpower">
<option value="Geländewagen">Geländewagen </option>
<option value="Ketten & Schienen">Ketten & Schienen</option>
<option value="Motorräder">Motorräder</option>
<option value="Oldtimer">Oldtimer </option>
<option value="Quads & Spaßmobile">Quads & Spaßmobile </option>
<option value="Rennwagen">Rennwagen</option>
<option value="Schneefahrzeuge">Schneefahrzeuge</option>
<option value="Traumautos">Traumautos </option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Essen & Trinken'">
<select id="scrollable-menu" class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Essen & Trinken">
<option value="Essen gehen">Essen gehen</option>
<option value="Kochkurse">Kochkurse</option>
<option value="Wein, Bier & Spirituosen">Wein, Bier & Spirituosen</option>
<option value="Kaffee & Schokolade">Kaffee & Schokolade</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Abenteuer & Sport'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Abenteuer & Sport">
<option value="Sport im Sommer">Sport im Sommer</option>
<option value="Sport im Winter">Sport im Winter</option>
<option value="Action & Stunts">Action & Stunts</option>
<option value="Wildnis">Wildnis</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Wellness & Gesundheit'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Wellness & Gesundheit">
<option value="Beauty & Styling">Beauty & Styling</option>
<option value="Massagen">Massagen</option>
<option value="Verwöhnen & Erholen">Verwöhnen & Erholen</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Kunst, Kultur & Lifestyle'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Kunst, Kultur & Lifestyle">
<option value="Vor der Kamera">Vor der Kamera</option>
<option value="Kunst & Handwerk">Kunst & Handwerk</option>
<option value="Musik & Tanz">Musik & Tanz</option>
<option value="Dating, Liebe & Romantik">Dating, Liebe & Romantik</option>
<option value="Lifestyle">Lifestyle</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Wasser & Wind'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Wasser & Wind">
<option value="Boot">Boot</option>
<option value="Kajak">Kajak</option>
<option value="Kanu">Kanu</option>
<option value="Rafting">Rafting</option>
<option value="Segeln">Segeln</option>
<option value="Surfen">Surfen</option>
<option value="Tauchen">Tauchen</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Reisen'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Reisen">
<option value="Alpin">Alpin</option>
<option value="Hotel">Hotel</option>
<option value="Kultur">Kultur</option>
<!-- <option value="Nachtleben">Nachtleben</option> -->
<option value="Romantik">Romantik</option>
<option value="Staedtetrips & Ausfluege">Staedtetrips & Ausfluege</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<i class="glyphicon glyphicon-filter" (click)="toggleFilter = !toggleFilter" ></i>
</div>
</div>
</div>
</div>
<div class="container-fluid ">
<div class="row">
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs tabs-left">
<li class="active">
<a href="#_all" data-toggle="tab" (click)="pricewise(0)">
<span class="round-tabs one">
<i class="glyphicon glyphicon glyphicon-th"></i>
</span>
</a>
</li>
<li>
<a href="#_all" (click)="loadNewsComment(); messageTab=false;loadingFeeds()" data-toggle="tab" >
<span class="round-tabs two">
<i class="glyphicon glyphicon glyphicon-bullhorn"></i>
</span>
</a>
</li>
<li>
Eigene
</li>
<li>
<a href="#_all" style="outline:none;" (click)="messageClick()" *ngIf="isAlive" data-toggle="tab">
<span class="round-tabs three">
<i class="glyphicon glyphicon-envelope"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Answer 1

Try and add a z-index to .search_box
Something like z-index 50 to test (reduce this z-index to a logic in your website after)
Also check the opacity

Answer 2

add z-index to search-box
.search_box{z-index:100 float: left;position: relative;width:100%;}