css - Hiding divs with overflow

Question

I want the blue square to be visible and red square to be hidden below the blue square. Blue and red should not overlap, they need to be ordered one after the other. But my CSS is not doing this. What am I missing?

document.getElementById('startAnim').addEventListener('click', function() {
  document.getElementById('red').classList.add('animate');
});

#background {
  position: relative;
  background-color: #3CF;
  width: 50px;
  height: 50px;
  overflow-y: hidden;
  border: medium;
}

#blue {
  background-color: blue;
  width: 50px;
  height: 50px;
  border: thin;
  top: 0%;
  border-color: #000;
  border-width: 1px;
}

#red {
  background-color: red;
  width: 50px;
  height: 50px;
  top: 50%;
  border: thin;
  border-color: #000;
  border-width: 1px;
}

.sq {
  position: absolute;
}

.animate {
  -webkit-animation-name: slidediv;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  -webkit-animation-timing-function: ease-in-out;
}


/* Standard syntax */

@keyframes slidediv {
  0% {
    top: 10px;
  }
  100% {
    top: 100px;
  }
}

<div id="background">
  <div id="blue" class='sq'></div>
  <div id="red" class='sq'></div>
</div>
<button id="startAnim"> Start </button>

Answer 1

what i understood is that you need the red square to be hidden below the blue one, so u can use the z-index to fix this, try my snippet if that's what you are looking for

document.getElementById('startAnim').addEventListener('click', function() {
  document.getElementById('blue').classList.add('animate');
});

#background {
  position: relative;
  background-color: #3CF;
  width: 50px;
  height: 50px;
  overflow-y: hidden;
  border: medium;
}

#blue {
  background-color: blue;
  width: 50px;
  height: 50px;
  border: thin;
  top: 0%;
  border-color: #000;
  border-width: 1px;
  z-index:7;
}

#red {
  background-color: red;
  width: 50px;
  height: 50px;
  top: 0%;
  border: thin;
  border-color: #000;
  border-width: 1px;
  z-index:6;
}

.sq {
  position: absolute;
}

.animate {
  -webkit-animation-name: slidediv;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  -webkit-animation-timing-function: ease-in-out;
}


/* Standard syntax */

@keyframes slidediv {
  0% {
    top: 0px;
  }
  100% {
    top: 100px;
  }
}

<div id="background">
  <div id="blue" class='sq'></div>
  <div id="red" class='sq'></div>
</div>
<button id="startAnim"> Start </button>