CSS z-index无法按预期工作

Question

我最近开始学习CSS3动画，我构建了一个小页面来测试这些动画。但我面临着关于z-index的问题。在我的测试页面中，左下角有一个岛，窗口底部有两个波浪。见here

我想把岛屿放在两个波浪之间，但它没有发生。 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-indexes的顺序如下：
海（980）＆lt;海滨（990）＆lt; Wave1（1000）＆lt;岛（1002）＆lt;船（1003）＆lt; Wave2（1004）

我觉得这可能会发生，因为wave和island都包含在不同的父容器中。但由于两个容器的z-index都设置为最低，我认为它应该可行。

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

最好是为此提供任何参考。谢谢。

Answer 1

你需要在同一个div中包含元素，现在你有海滨和海洋分开，所以z-index有效＆＃34;重启＆＃34;在每个人的内心。

Seashore的z-index为909，从那个社交气球和岛屿有991和1002（他们可能只有1和2），因为它来自海边的909。

同样在海上你从980开始，然后wave1是1000，船是1003，波2是1004（它们可能分别是1,2和3）。

将所有移动元素放在同一个div中，并为每个元素提供一个增量z-index，将它们放在页面的正确级别。

试着看看菲利普沃尔顿的文章What No One Told You About Z-Index。

Answer 2

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

.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。

结果：