html - 在 HTML 元素中 float 的 CSS3 动画

Question

我无法弄清楚为什么网页上的弹跳箭头没有落后于网页上的其他元素。

我使用 CSS3 和以下代码为箭头制作了动画

-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;  
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-fill-mode:both;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;

但是，如果向下滚动页面，仍然可以看到箭头，尤其是在“时间轴”部分和“猫 sleep 的地方”部分。我已经在一些元素上尝试了 z-index，但似乎没有什么可以修复它。

可以查看here

这可能是一些小东西，但无法弄清楚，谢谢!

Answer 1

这看起来有点傻，但是对于 header 使用:

position: relative;
z-index: -2;

然后，对于 .arrow，使用:

z-index: -1;

它将位于所有 z-index: auto 元素的后面，这几乎是页面的其余部分。 header 必须是 position: relative 以便负 z-index 一起工作。