Попробую расписать о том как работает z-index.
К примеру есть 2 дива c разным z-index, по умолчанию у них нет контекста стекирования потому что по умолчанию у них position: static; - а это позиционирование не создаёт контекст для z-index, и не важно сколько бы был z-index у .gg, нижний блок всегда будет его перекрывать, а если бы у них бы был контекст и одинаковый z-index то перекрывал бы нижний в иерархии html элемент
<div class="gg"></div>
<div class="tt"></div>
а вот и стили к ним
.gg{
z-index: 999;
width: 100px;
height: 100px;
background: red;
}
.tt{
z-index: 2;
width: 100px;
height: 100px;
background: blue;
margin-top: -50px;
}
Из документации сказано в каких случаях создаётся контекст стекирования
1 - является корневым элементом (то есть HTML)
2 - позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto"
3 - flex элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: flex или display: inline-flex;
4 - display: inline-flex;
5 - элементы с opacity меньше чем 1
6 - элементы с transform отличным от "none"
7 - элементы с mix-blend-mode значением отличным от "normal"
8 - элементы с filter значением отличным от "none"
9 - элементы с isolation установленным в "isolate"
10 - position: fixed;
11 - если мы указываем элементу атрибут will-change при этом не обязательно присваивать ему значения
12 - элементы с -webkit-overflow-scrolling (en-US) установленным в "touch"
13 - grid элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: grid
Если нужно что бы .gg - перекрывал нижний по иерархии html элемент, мы можем задать для .gg - один из перечисленных вариантов, например display: inline-flex; или position: relative; или же задать например родителю этих двух блоков display: flex; flex-direction: column; ( и блоки .gg .tt раз они станут флекс элементами то и z-index будет работать между ними, несмотря на то какой из них ниже а какой выше в иерархии html )
----------------------------------------------------------------------------------------------- -------------------------
Следующий пример который как раз таки возможно даст тебе понять о том как работает наконец таки z-index у детей.
Добавим потомка для дива с классом
gg в данном случае это див с классом
gg__children
<div class="gg">
<div class="gg__children"></div> // потомок
</div>
<div class="tt"></div>
а вот и стили
.gg{
width: 100px;
height: 100px;
background: red;
z-index: 999;
}
.gg__children{
width: 50px;
height: 200px;
background: green;
z-index: 100;
}
.tt{
width: 100px;
height: 100px;
background: blue;
margin-top: -50px;
z-index: 2;
}
так вот сколько угодно можно задавать потомку z-index , он всё равно выше z-index родителя прыгнуть не сможет,
а раз его родитель .gg - не имеет свой контекст и раз он находится выше в иерархии html то и соответственно .tt перекроет их всех
Советую как можно проще его использовать но зная основные принципы , или изучать от А до Я и проникнуть в саму суть его работы.
Документация 
