How to get animating element to sit behind other elements – CSS [duplicate]

by

I want the sliding down image to animate behind the header element. I tried adding a z-index to both elements but it does not help. I also tried changing position: absolute to position: fixed but it doesn’t make any difference.

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">

Setting header position to relative should to the trick

header {
  position:relative;
  background-color: yellow;
  padding: 20px;
  z-index:1;
}

.slideDownImage {
  animation: slideDown 5s ease forwards;
}
     
@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">

I did this fix. I put position:absolute; and width:100% at the header element.

header {
  background-color: yellow;
  padding: 20px;
  z-index: 20;
  position:absolute;
  width:100%
}

.slideDownImage {
  position: relative;
  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">

Leave a Comment