z-index无法与所有图层一起正常工作

Question

我想在HTML + CSS中做简单的动画。有点像进度条。我有背景 - #mid。我有“bar”的形式 - #kingIcon我有内容“bar” - #kingIconBack kingIcon和mid正常工作。 kingIcon正处于中期，具有相当的不透明度。但内容栏 - 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的孩子。

感谢所有评论！