Eu tenho uma div de contêiner e tembackground-color: red;. Existem cerca de 12 filhos neste contêiner, e o último filho tembackground-color: blue;. Tentei mover o recipiente para o topo da criança combackground-color: blue. Usei um índice z mais alto para o contêiner, mas ele ainda está atrás da criança.

.no1 {
  width: 800px;
  height: 300px;
  background-color: red;
  position: relative;
  z-index: 999;
}

.no2 {
  position: relative;
  width: 500px;
  height: 200px;
  background-color: blue;
  z-index: 1;
}

.no3 {
  position: relative;
}

.no4 {
  position: relative;
}

.no5 {
  position: relative;
}

<div class="no1">
  <div>
    <div>
      <div class="no3">
        <div>
          <div class="no4">
            <div>
              <div>
                <div>
                  <div class="no5">
                    <div class="no2">


                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Aqui está o JSFiddle