Tell me why z-index doesn't work?

Question

In general, there is such a html structure:

<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>

I hang up this CSS:

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

Assuming that my search results will overlap the block below, but nothing happens.

div with id="test1" simply stretched in height by shifting the bottom block down.

Tell me what am I missing? Chrome is not the development menu does not show the overlapping styles.

If you need any more information, then I am ready to provide it.

Here is a more complete example.

 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>

elements must be at the same hierarchy level in order for z-index to work
@StrangerintheQ but the fact that 2 divs have one parent is not enough?

Accepted Answer · 2019-04-11T19:05:12

This can be solved by the absolute positioning of the second element and the explicit indication of top:50px , like this:

 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>

There must also be an inset with a button that should not run down.
It seems to work, but stretching elements in width disappears ... = (

Answer 2 · 2019-04-11T16:12:19

Items must be at the same hierarchy level in order for z-index to work.

It is not clear why or what does not work for you, is it all right here? The first must be the second:

 #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>

And the overlap can be done only through the z-index, right?
@ iluxa1810 well, or the order of the elements, the last one on top
Just embarrassed not closed div from above, as if something was lost ...
@ iluxa1810 is my cant, I'm writing from my phone, I'll fix it in 15 minutes))
@ iluxa1810 and I lied, you have the correct markup, you just crooked it posted here

Tell me why z-index doesn't work?

2 answers 2

More articles: