I am trying to create a sliding down image effect that animates behind the header element. I attempted to use z-index
on both elements, but it did not work. Switching from position: absolute
to position: fixed
also did not yield the desired result.
header {
background-color: yellow;
padding: 20px;
z-index: 2;
}
.slideDownImage {
position: absolute;
animation: slideDown 5s ease forwards;
z-index: 1;
}
@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">