Z-индекс не работает правильно со всеми слоями

Question

Я хочу сделать простую анимацию в HTML + CSS.Что-то вроде прогресса.У меня есть фон - #mid.У меня есть форма для "bar" - #kingIcon У меня есть содержимое "bar" - #kingIconBack kingIcon и mid работает правильно.KingIcon находится на середине, с прозрачностью corrent.Но панель содержимого - kingIconBack охватывает все

Я пытался изменить положение.

CSS 
#mid{
    width: 60%;
    background-color: rgb(59, 194, 153);
    float: left;
    z-index: 3;
    position: relative;
}


#kingIcon{
    margin-top: 20px;
    z-index: 5;
    width: 60%;
    position: relative;
    left: 20%;

}

#kingIconBack{
    z-index: 4;
    position: absolute;
    top: 0%;

}


HTML

<div id="mid">
          <div id="kingIcon"><img src="krolPrzezroczysty.png" width="100%"  alt="kingIcon">
                    <div id="kingIconBack"><img src="gradient.png" width="141.2%"  > </div>
                  </div>


        </div>

панель содержимого - kingIconBack охватывает все

Answer 1

Я понял, что kingIconBack не может быть ребенком kingIcon.

Спасибо за все комментарии!