1. 홈
  2. 질의 응답
  3. Z- 색인이 탭 아래에서 작동하지 않습니다.

Z- 색인이 탭 아래에서 작동하지 않습니다.

2017-09-06 2 views
0

내 자동 완성기에 문제가 있습니다. 내 사이트의 크기를 조정하면 자동 완성기가 탭 아래에 있는데도 Z- 인덱스가 있습니다. 이 문제를 어떻게 해결할 수 있습니까? 나는 많은 것들을 시도했다. 예를 들면 클래스 autocompleter를 절대치로 ​​바꾼다. 탭 위에 있지만 위치는 바뀐다. 바탕 화면 크기로 다시 크기를 조정하면 작동하지 않습니다. 여기 Z- 색인이 탭 아래에서 작동하지 않습니다.

.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%} 
}

이 탭에 대한 내 CSS입니다 : 여기

enter image description here

는 Autocompleter에 대한 내 CSS입니다 

.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 &amp; Fallen" > 
                 <option value="Fallen &amp; Springen">Fallen &amp; Springen</option> 
                <option value="Fliegen mit Motor">Fliegen mit Motor</option> 
                <option value="Gleiten &amp; Schweben">Gleiten &amp; Schweben</option> 
                <option value="Jets &amp; Weltraum">Jets &amp; Weltraum</option> 
               </optgroup> 

               <optgroup label="Motorpower"> 
                <option value="Geländewagen">Geländewagen </option> 
                <option value="Ketten &amp; Schienen">Ketten &amp; Schienen</option> 
                <option value="Motorräder">Motorräder</option> 
                <option value="Oldtimer">Oldtimer </option> 
                <option value="Quads &amp; Spaßmobile">Quads &amp; Spaßmobile </option> 
                <option value="Rennwagen">Rennwagen</option> 
                <option value="Schneefahrzeuge">Schneefahrzeuge</option> 
                <option value="Traumautos">Traumautos </option> 

               </optgroup> 

               <optgroup label="Essen &amp; Trinken"> 
                <option value="Essen gehen">Essen gehen</option> 
                <option value="Kochkurse">Kochkurse</option> 
                <option value="Wein, Bier &amp; Spirituosen">Wein, Bier &amp; Spirituosen</option> 
                <option value="Kaffee &amp; Schokolade">Kaffee &amp; Schokolade</option> 
               </optgroup> 

               <optgroup label="Abenteuer &amp; Sport"> 
                <option value="Sport im Sommer">Sport im Sommer</option> 
                <option value="Sport im Winter">Sport im Winter</option> 
                <option value="Action &amp; Stunts">Action &amp; Stunts</option> 
                <option value="Wildnis">Wildnis</option> 

               </optgroup> 
               <optgroup label="Wellness &amp; Gesundheit"> 
                <option value="Verwöhnen &amp; Erholen">Verwöhnen &amp; Erholen</option> 
                <option value="Beauty &amp; Styling">Beauty &amp; Styling</option> 
                <option value="Fitness &amp; Ernährung">Fitness &amp; Ernährung</option> 
                <option value="Körper &amp; Seele">Körper &amp; Seele</option> 

               </optgroup> 
               <optgroup label="Kunst, Kultur &amp; Lifestyle"> 
                <option value="Dating, Liebe &amp; Romantik">Dating, Liebe &amp; Romantik</option> 
                <option value="Kunst &amp; Handwerk">Kunst &amp; Handwerk</option> 
                <option value="Lifestyle">Lifestyle</option> 
                <option value="Musik &amp; Tanz">Musik &amp; Tanz</option> 
                <option value="Vor der Kamera">Vor der Kamera</option> 
                <option value="Vor der Kamera">Wedding</option> 

               </optgroup> 
               <optgroup label="Wasser &amp; 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 &amp; Ausfluege">Staedtetrips &amp; Ausfluege</option> 
               </optgroup> 

              </select> 
             </div> 

             <div class="col-sm-3" *ngIf="category_search == 'Fliegen &amp; Fallen'"> 

              <select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)"> 

               <optgroup label="Fliegen &amp; Fallen"> 
                <option value="Fallen &amp; Springen">Fallen &amp; Springen</option> 
                <option value="Fliegen mit Motor">Fliegen mit Motor</option> 
                <option value="Gleiten &amp; Schweben">Gleiten &amp; Schweben</option> 
                <option value="Jets &amp; Weltraum">Jets &amp; 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 &amp; Schienen">Ketten &amp; Schienen</option> 
                <option value="Motorräder">Motorräder</option> 
                <option value="Oldtimer">Oldtimer </option> 
                <option value="Quads &amp; Spaßmobile">Quads &amp; 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 &amp; Trinken'"> 

              <select id="scrollable-menu" class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)"> 
               <optgroup label="Essen &amp; Trinken"> 
                <option value="Essen gehen">Essen gehen</option> 
                <option value="Kochkurse">Kochkurse</option> 
                <option value="Wein, Bier &amp; Spirituosen">Wein, Bier &amp; Spirituosen</option> 
                <option value="Kaffee &amp; Schokolade">Kaffee &amp; Schokolade</option> 
               </optgroup> 
              </select> 
             </div> 
             <div class="col-sm-3" *ngIf="category_search == 'Abenteuer &amp; Sport'"> 

              <select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)"> 
               <optgroup label="Abenteuer &amp; Sport"> 
                <option value="Sport im Sommer">Sport im Sommer</option> 
                <option value="Sport im Winter">Sport im Winter</option> 
                <option value="Action &amp; Stunts">Action &amp; Stunts</option> 
                <option value="Wildnis">Wildnis</option> 
               </optgroup> 
              </select> 
             </div> 
             <div class="col-sm-3" *ngIf="category_search == 'Wellness &amp; Gesundheit'"> 

              <select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)"> 
               <optgroup label="Wellness &amp; Gesundheit"> 
                <option value="Beauty & Styling">Beauty & Styling</option> 
                <option value="Massagen">Massagen</option> 
                <option value="Verwöhnen &amp; Erholen">Verwöhnen &amp; Erholen</option> 
               </optgroup> 
              </select> 
             </div> 
             <div class="col-sm-3" *ngIf="category_search == 'Kunst, Kultur &amp; Lifestyle'"> 

              <select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)"> 
               <optgroup label="Kunst, Kultur &amp; Lifestyle"> 
                <option value="Vor der Kamera">Vor der Kamera</option> 
                <option value="Kunst &amp; Handwerk">Kunst &amp; Handwerk</option> 
                <option value="Musik &amp; Tanz">Musik &amp; Tanz</option> 
                <option value="Dating, Liebe &amp; Romantik">Dating, Liebe &amp; Romantik</option> 
                <option value="Lifestyle">Lifestyle</option> 

               </optgroup> 
              </select> 
             </div> 
             <div class="col-sm-3" *ngIf="category_search == 'Wasser &amp; Wind'"> 

              <select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)"> 
               <optgroup label="Wasser &amp; 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 &amp; Ausfluege">Staedtetrips &amp; 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> 
          <a href="#_own" data-toggle="tab" style="outline:none;" (click)="getOwn()" *ngIf="role ==1"> Eigene </a> 
         </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>

출처

2017-09-06 mogli mogli

+0

여기서 html은 무엇입니까? jsfiddle.net에서 제공 할 수 있습니까? – Moher

답변

0

시험 후 (후 귀하의 웹 사이트에 로직이 Z- 인덱스 감소) 테스트하는 Z- 인덱스 (50)와 같은

뭔가를 .search_box하는 Z- 인덱스를 추가

는 또한 불투명도를 확인

출처

2017-09-06 17:52:54 Stephen

+0

제 실수. 나는 클래스 searchfilter에 대해 0.9의 불투명도를 가졌습니다. –

+0

도와 줘서 기쁩니다! – Stephen

0

검색 상자에 Z- 색인을 추가하십시오. .search_box {z- 색인 : 100 float : 왼쪽; 위치 : 상대적; 너비 : 100 %;}

출처

2017-09-06 18:09:14 abdul

+0

불행히도 작동하지 않습니다. –

관련 문제

 관련 문제