How to force a floated div to remain in front of another div when they collide

Question

I am trying to make this div stay in front.

If I add a background color to the second div that is not floated, it will stay at the top of the floated div but no matter what I do the floated div or the first div is not staying at the top.

Rather the text is mixed with the text of the other div.

#slider-section {
  color:black;
  font-size: 25px;
  animation: sliderIn .1s ease-in;
  animation-duration: 15s;
  padding: 3px;
  font-weight: 800;
  z-index: -1000;
}

@keyframes sliderIn {
  0% {
    transform: skewX(10deg) translateX(-500px);
  }
  100% {
    transform: skew(0deg) translateX(1570px);
  }
}
.breaking {
  font-size: 25px;
}

<div><div style="color: black;border-radius: 3px; font-weight: 900;float: left;background-color: blue;padding: 3px;z-index: 1000;" class="breaking">Attention: </div><div class="go" id="slider-section">All participants check your email.</div></div>

Here is the other way round, the second div with a background will stay at the top of the first but the first cant.

#slider-section {
  color:black;
  font-size: 25px;
  animation: sliderIn .1s ease-in;
  animation-duration: 15s;
  padding: 3px;
  font-weight: 800;
  z-index: -1000;
  background-color:blue;
}

@keyframes sliderIn {
  0% {
    transform: skewX(10deg) translateX(-500px);
  }
  100% {
    transform: skew(0deg) translateX(1570px);
  }
}
.breaking {
  font-size: 25px;
}

<div><div style="color: black;border-radius: 3px; font-weight: 900;float: left;background-color: blue;padding: 3px;z-index: 1000;" class="breaking">Attention: </div><div class="go" id="slider-section">All participants check your email.</div></div>

How can I solve it, I want the first to hide the second when they collide.