html - 当 z-index 不起作用时，如何将图像放在 HTML/CSS 中的其他图像前面？

Question

我目前正在开发一个 HTML/CSS 和 JS 模块。

在我的代码中，我有 4 个图像absolute。我想1 of them移动（带有动画）in front的the others.

我的 HTML 代码如下所示：

<section class="bar-container">

      <img id="oyster">

      <img class="waves" id="wave-1">
      <img class="waves" id="wave-2">
      <img class="waves" id="wave-3">    
        
      <div class="progression-bar">
             some stuff
      </div>
</section>

我的 CSS 代码如下所示：

.bar-container {
    position: relative;
}

.bar-container #oyster {
    position: absolute;
    left: 8.5%;
    top: 38%;
    animation: 2s ease infinite slideup;
    transition: left 1.5s;
    z-index: 4;
}

.bar-container #wave-1 {
    position: absolute;
    top: 60%;
    left: 14%;
    opacity: 1;
    z-index: 3;
}

.bar-container #wave-2 {
    position: absolute;
    top: 60%;
    left: 39%;
    opacity: 1;
    z-index: 2;
}

.bar-container #wave-3 {
    position: absolute;
    top: 60%;
    left: 64%;
    opacity: 1;
    z-index: 1;
}

事实是我oyster落后于海浪，我尝试了很多不同的组合，但它仍然没有像我想要的那样工作......

这是结果

我真的不知道该怎么做我想做的事......有人可以帮助我吗？

标签： htmlcssimagez-index