Position absolute inside position relative

Question

I know there are bunch of position:absolute and z-index questions on here but I have a slightly unique situation. I have a slide show that is position:relative; with a <h2>inside that is position:absolute. Now outside of the slideshow, I have a position:relative element that I want .slide-show-text to sit on top of .slide-show-wrap but z-index is not registering and the text sits under the wrap instead of on top.

<section>
    <div class="slideshow">
        <?php if( have_rows('landing_slides') ):
        while ( have_rows('landing_slides') ) : the_row();  ?>
          <div class="landing-bg"  data-type="background" data-speed="2" style="background-image: url('<?php the_sub_field("img"); ?>')">
            <h2 class="slide-show-text">
                <?php echo the_sub_field('img_text'); ?>
            </h2>
          </div> <!-- end landing bg -->
        <?php
        endwhile;
        else :
        endif;
        ?>

        </div> <!--end slide show -->
</section> <!-- /SECTION 1 -->

<div class="slideshow-text-wrap">
</div><!-- end slideshow text -->

.landing-bg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: fixed;
    width: 100%;
    z-index: 1001;
    position: relative;
    margin-top: 0;
}
.slick-track {
    height: 73vh;
    width: 100%;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
}

.slide-show-text {
    bottom: -40px;
    font-family: "Teko", sans-serif;
    color: #f1e4b2;
    font-size: 50px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 100001;
}
.slideshow-text-wrap {
    height: 126px;
    background-color: #e95526;
    z-index: 101;
    position: relative;
}