child element in front of all the other elements outside the parent, css

Question

I want a child element to be in front of the element below the parent element without making the parent of the child to be in front of the other element. Is that possible or is there a better solution for this?

The slider is supposed to cover the light blue menu but not the text :)

My Code:

ul {
  position: absolute;
  top: 200px;
  left: 20px;
  display: flex;
  background: #00FFFF;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px #00FFBB;
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  width: 110px;
}

a {
  display: block;
  padding: 20px;
  text-align: center;
  font-family: arial;
  color: #000;
  z-index: 1;
  transition: 0.5s;
  text-decoration: none;
}

.slide {
  position: absolute;
  width: 110px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background: #00CFCF;
  transition: 0.5s;
  opacity: 0;
}

ul li:nth-child(1).active~.slide {
  left: 0;
  opacity: 1;
}

ul li:nth-child(2).active~.slide {
  left: 110px;
  opacity: 1;
}

ul li:nth-child(3).active~.slide {
  left: 220px;
  opacity: 1;
}

ul li:nth-child(4).active~.slide {
  left: 330px;
  opacity: 1;
}

ul li:nth-child(5).active~.slide {
  left: 440px;
  opacity: 1;
}

<ul>
  <li class=""><a href="#">constant</a></li>
  <li class="active"><a href="#">blink</a></li>
  <li><a href="#">rainbow</a></li>
  <li><a href="#">stack-led</a></li>
  <li><a href="#">pong</a></li>
  <li class="slide"></li>
</ul>

I appreciate your help.

I've tried to use z-index but nope, does not work. I wanted the child of a parent to be in front of the other element below the parent.