CSS animation appear on top while running

Question

I'm animating 2 blinking eyes. But they appear on top of my navigation bar when I scroll the page. It doesn't do that without the animation. How can I make the animation run under the navigation bar? Some posts mentioned z-index but I can't seem to make it work. I replicated the problem here: Vue SFC Playground

Answer 1

I have edited your code as follows:

<script setup>

</script>

<template>
<div class="nav">
  navigation bar
</div>
<div class="face">
<div class="eyes">
   <div></div>
   <div></div>
</div>
</div>
<div class="content">
  
  </div>
</template>

<style>
 @keyframes blink {
    0% {transform: scaleY(0.1) scaleX(1.4);}
    5% {transform: scaleY(1) scaleX(1);}
    10% {transform: scaleY(0.1) scaleX(1.4);}
    15% {transform: scaleY(1) scaleX(1);}
  }
  .face {
    height: 100px;
    background-color: black;
    padding: 20px;
    margin: 50px 100px;
  }
  .eyes {
    display: flex;
    flex-direction: row;
    margin: 0 100px;
    justify-content: space-between;
    
  }
  .eyes div {
    width: 15px;
    height: 20px;
    background-color: white;
    border-radius: 5px;
    animation: blink 3s linear 0.0001s infinite;
  }
  .nav{
    background-color: pink;
    padding: 10px;
    position: fixed;
    top: 0;
     left: 0;
     right: 0;
    z-index: 100;
  }
  .content {
    height: 1000px
  }
</style>

Here, I have added a z-index: 100 so that the nav bar always remains at the top.