如何让CSS动画元素置于其他元素后方？

问题核心在于z-index仅对非static定位的元素生效，你的header默认是position: static，所以设置的z-index: 2完全不起作用，这就是调整z-index和图片position都没效果的原因。

解决步骤：

• 给header添加position: relative（也可选用absolute/fixed，根据布局需求决定），让z-index属性生效
• 保持图片的position设置（absolute或fixed均可），确保它的z-index值小于header的z-index

修正后的代码如下：

header {
  background-color: yellow;
  padding: 20px;
  z-index: 2;
  position: relative; /* 关键：添加非static定位 */
}

.slideDownImage {
  position: absolute;
  animation: slideDown 5s ease forwards;
  z-index: 1;
  top: 0; /* 可选：让图片从header上方区域开始下滑 */
}
        
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  } 
  100% {
    transform: translateY(0);
  }
}

<header>
  Hello, Mr. Mouse!
</header>

<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Mouse_white_background.jpg" class="slideDownImage">

补充：如果选用position: fixed设置图片，只要保证header为非static定位且z-index更高，同样能实现图片在header后方下滑的效果。

内容的提问来源于stack exchange，提问作者Daniel Williams