Z-индекс под текстом, но над фоном

Question

Я пытаюсь получить div для показа в качестве частичного фона ниже встроенного содержимого, содержащего div, но выше фона его контейнера. Если я установлю z-индекс только частичного фона на -1, он появится за фоном. Но если я установлю содержащий z-индекс div-элементов на 1, а z-индекс содержащегося div-файла равен -1, он отобразится по желанию.

Может кто-нибудь объяснить мне, почему это так, и если это надежный метод или нет?

.container {
  position: relative;
  width: 80%;
  height: 18px;
  padding: 6px 10px;
  background: #666;
  z-index: 1;
}

.partialbg {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 30px;
  width: 80%;
  background: #0CC;
  z-index: -1;
}

<div class="container">Text here
  <div class="partialbg"></div>
</div>

Answer 1

Причина, по которой это происходит, в том, что есть ребенок и родитель. Если вы установите z-index на родителя ребенок будет таким же, так как z-index сложен

Таким образом, установив z-index из 1 на родителя, ребенок теперь также 1,

Для ребенка систематически невозможно быть позади родителя, поскольку это не имеет никакого смысла. Тем не менее, текст является родным братом ребенка. Установив z-index из -1 на ребенка, по сути, нет никакого влияния между ребенком и родителем, однако, так как происходит влияние на одного из братьев и сестер, ребенок теперь идет за родным братом.