Z-Index not working properly in Slick Slider

Hello,

I am making a slider, and the basic DOM is:

<div class="overlay"><img></div>

<div class="slick-slider">
     <div class="slide"><div class="slide-text">TEXT</div></div>
     <div class="slide"><div class="slide-text">TEXT</div></div>
     <div class="slide"><div class="slide-text">TEXT</div></div>
</div>

<div class="slick-buttons">
     ....
</div>

So the overlay is to be displayed on top of the slider, which is done through absolute positioning. Then a Z-Index is put on all components so the TEXT in the slider shows above the overlay, but everything else is below it. This is to ensure the text on each slide is easy to be read and not underneath the overlay image. This can be done easy enough.

However, once slick is integrated into it, the z-index loses functionality. Can anyone explain why this is happening? I cannot get the z-index to work with Slick Slider, and I saw looking around that many people have had issues with z-indexing.