CSS Z-index无法正常工作

debugcn 发表于 Dev

Abhishekkannojia

我最近开始学习CSS3动画，并建立了一个小页面来测试这些动画。但是我在z-index方面遇到了问题。在我的测试页中，左下角有一个岛，窗口底部有两个波浪。看这里

我想把岛放在两个波浪之间，但是这没有发生。HTML结构是这样的：

<div class="seashore">
    ...
    <img class="island" src="img/island.png" />
</div>

<div class="sea">
    <img class="wave1" src="img/w1.png" />
    <img class="boat" src="img/tboat.png" />
    <img class="wave2" src="img/w2.png" />
</div>

还有各自的CSS

/* Some CSS */

.seashore {
    position: absolute;
    left:0%;
    bottom: 0%;
    width: 50%;
    height: 600px;
    z-index:990;
    overflow: hidden;
}

.island {
    position: absolute;
    left: -1px;
    bottom: 5%;;
    z-index: 1002;
}

.sea {
    position: fixed;
    bottom: 0px;
    width: 90%;
    height: 60px;
    z-index:980;
    ....
}

.wave1 {
    position: absolute;
    top:0px;
    left: 10px;
    z-index: 1000;
    ....
}

.wave2 {
    position: absolute;
    top: 8px;
    left: -16px;
    bottom: -3%;
    z-index: 1004;
    ....

}

.boat {
    position: fixed;
    bottom: -15%;
    left: 75%;
    /*-webkit-transform: rotate(45deg);
    transform: rotate(45deg);*/
    z-index: 1003;
    ....
}

z索引的顺序为：
海（980）<海滨（990）<波浪1（1000）<岛屿（1002）<船（1003）<波浪2（1004）

我觉得这可能正在发生，因为海浪和岛屿都包含在不同的父容器中。但是由于两个容器的z-index都设置为最低，所以我认为它应该可以工作。

所以我的问题是这种行为的原因是什么？有没有解决方法？

最好是可以提供相同的参考。谢谢你。

铁硝龙

删除CSS，.sea并更新position和z-index的wave：

.wave1 {
    position: absolute;
    bottom:0px;
    left: 10px;
    z-index: 900;
    ....
}

.wave2 {
    position: absolute;
    bottom: 8px;
    left: -16px;
    bottom: -3%;
    z-index: 1003;
}

如以上答案中所述，您可以仅将1,2和3用于z-index。

结果：

在此处输入图片说明