Question

我想用HTML + CSS做简单的动画。有点像进度条。我有背景-#mid。我有“酒吧”的表格-#kingIcon 我有内容“酒吧”-#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的子代。

感谢所有评论！

z-index不适用于所有图层

1 个答案: