Подскажите , почему z-index не работает?

153

23 января 2020, 02:10

В общем, есть такая структура html:

        <div>
            <div id="test1">
                 <div class="offset-sm-2 col-sm-9 search-results">
                    <div class="search-result" *ngFor="let assembly of searchResult">{{assembly.name}}</div>
             </div>
        </div>
        <div id="test2"></div>
        </div>

Вешаю вот такой CSS:

#test1{
     position: relative;
     z-index: 9999;
}
#test2{
     position: relative;
     z-index: -1;
}

Полагая, что мои результаты поиска будут перекрывать блок внизу, но ничего не происходит.

div с id="test1" просто растягивается по высоте смещая нижний блок вниз.

Подскажите, что я упускаю? Chrome не меню разработки не показывает перекрытия стилей.

Если нужна еще какая-нибудь информация, то я готов ее предоставить.

Вот более полный пример

body { 
  -webkit-appearance: none; 
} 
 
#search-component { 
  padding-top: 10px; 
  padding-right: 20px; 
} 
 
#additional-panel { 
  -webkit-appearance: none; 
  /* background-color: darkgrey; */ 
  border: 0.1px solid silver; 
  box-sizing: border-box; 
} 
 
#additional-panel>.form-group.row { 
  -webkit-appearance: none; 
  padding-top: 5px; 
} 
 
.search-result { 
  border: 10px aqua; 
  padding: 2px; 
  cursor: pointer; 
} 
 
.search-results { 
  border: 1px solid cornflowerblue; 
  border-radius: 3px; 
  box-sizing: border-box; 
  overflow-y: auto; 
} 
 
.search-result:nth-child(even) { 
  background: #fafafa; 
} 
 
.search-result:hover { 
  background: dodgerblue; 
} 
 
#test1 { 
  position: relative; 
  z-index: 9999; 
} 
 
#test2 { 
  position: relative; 
  z-index: -1; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
<div> 
  <div id="test1"> 
    <div> 
      <div class="input-group"> 
        <label for="search" class="col-sm-2 col-form-label">Поиск</label> 
        <input name="search" class="col-sm-8 form-control" [(ngModel)]="dataToSearch.assemblyName" /> 
        <button class="col-sm-1" (click)="onSearchClick()">искать</button> 
      </div> 
      <div id="additional-panel" class="offset-sm-2 col-sm-9" *ngIf="!isColapsed"> 
        <div class="form-group row"> 
          <label class="col-sm-2" for="description">Описание</label> 
          <input class="form-control col-sm-5" id="description" name="Description" /> 
        </div> 
      </div> 
      <button class="offset-sm-2 col-sm-9" (click)="isColapsed=!isColapsed">Дополнительные параметры</button> 
              <div class="offset-sm-2 col-sm-9 search-results"> 
          <div class="search-result">1</div> 
          <div class="search-result">1</div> 
          <div class="search-result">1</div> 
          <div class="search-result">1</div> 
          <div class="search-result">1</div> 
          <div class="search-result">1</div> 
          <div class="search-result">1</div> 
          <div class="search-result">1</div> 
        </div> 
    </div> 
 
    <div id="test2"> 
      Контент 
    </div> 
  </div>

Answer 1

Можно это решить за счет абсолютного позиционирования второго элемента и явного указания top:50px, вот так:

body { 
  -webkit-appearance: none; 
} 
 
#search-component { 
  padding-top: 10px; 
  padding-right: 20px; 
} 
 
#additional-panel { 
  -webkit-appearance: none; 
  /* background-color: darkgrey; */ 
  border: 0.1px solid silver; 
  box-sizing: border-box; 
} 
 
#additional-panel>.form-group.row { 
  -webkit-appearance: none; 
  padding-top: 5px; 
} 
 
.search-result { 
  border: 10px aqua; 
  padding: 2px; 
  cursor: pointer; 
} 
 
.search-results { 
  border: 1px solid cornflowerblue; 
  border-radius: 3px; 
  box-sizing: border-box; 
  overflow-y: auto; 
  background-color:white 
} 
 
.search-result:nth-child(even) { 
  background: #fafafa; 
} 
 
.search-result:hover { 
  background: dodgerblue; 
} 
 
#test1 { 
  position: relative; 
  z-index: 9999; 
} 
 
#test2 { 
  position: absolute; 
  top:50px; 
  z-index: -1; 
  background-color:wheat; 
  width:100% 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
<div> 
  <div id="test1"> 
    <div class="input-group"> 
      <label for="search" class="col-sm-2 col-form-label">Поиск</label> 
      <input name="search" class="col-sm-8 form-control" [(ngModel)]="dataToSearch.assemblyName" /> 
      <button class="col-sm-1" (click)="onSearchClick()">искать</button> 
    </div> 
    <div class="offset-sm-2 col-sm-9 search-results"> 
      <div class="search-result">1</div> 
      <div class="search-result">1</div> 
      <div class="search-result">1</div> 
      <div class="search-result">1</div> 
      <div class="search-result">1</div> 
      <div class="search-result">1</div> 
      <div class="search-result">1</div> 
      <div class="search-result">1</div> 
    </div> 
  </div> 
  <div id="test2"> 
    Контент Контент Контент Контент Контент Контент<br> 
    Контент Контент Контент Контент Контент Контент<br> 
    Контент Контент Контент Контент Контент Контент<br> 
    Контент Контент Контент Контент Контент Контент<br> 
    Контент Контент Контент Контент Контент Контент<br> 
    Контент Контент Контент Контент Контент Контент<br> 
  </div> 
</div>

Answer 2

Элементы должны быть на одном уровне иерархии для того чтобы работал z-index

Не понятно почему или что у Вас не работает, тут ведь все верно? первый идет надо вторым:

#test1 { 
  position: relative; 
  background-color: red; 
  z-index: 9999; 
} 
 
#test2 { 
  position: relative; 
  z-index: -1; 
  background-color: blue; 
  top: -11px; 
}

<div> 
            <div id="test1"> 
                 <div class="offset-sm-2 col-sm-9 search-results"> 
                    <div class="search-result" *ngFor="let assembly of searchResult">{{assembly.name}}</div> 
             </div> 
        </div> 
        <div id="test2">1</div> 
        </div>