bxslider background-image with slider content z-index not overlapping

Question

I'm having an issue with the bxslider that has a background-image css property set and the z-index of the slider content won't pop out of the bxslider; it stays inside and text gets cut off.

I want to be able to pop out the slider content (red background) outside of the bxslider and overlap the div content (green background). I've tried setting the position absolute (other than static) and the z-index to a large number but it doesn't budge. Any solution to this?

Here's the code below and the jsfiddle here: https://jsfiddle.net/TheAmazingKnight/an8ymdw1/

HTML:

<div id="hero" style="visibility: hidden;">
  <div class="bxslider">
    <div class="hero hero-slide1">
      <div class="hero-content">
        <div class="hero-text container" style="background: red">
          <h2>SLIDER CONTENT<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit,Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet,consectetur adipiscing elit, Lorem ipsum dolor sit amet,consectetur adipiscing elit, Lorem ipsum dolor sit amet, </h2>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="div-content">
  <div class=" hero-text container" style="background: green;">
    <h2>DIV CONTENT<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit,Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet,consectetur adipiscing elit, Lorem ipsum dolor sit amet,consectetur adipiscing elit, Lorem ipsum dolor sit amet, </h2>
  </div>
</div>

CSS:

            /************** TROUBLESHOOT CODE **************/
            
            #hero .hero-content {
              position: absolute;
              bottom: -125px;
              z-index: 9999999;
            }

            .div-content {
              position: relative;
              z-index: -999999;
            }

            /************** TROUBLESHOOT CODE **************/


            /************** BXSLIDER CSS **************/
            
            .bx-wrapper {
              margin-bottom: 0;
            }

            .hero-text {
              display: flex;
              flex-direction: column;
              padding: 15px;
            }

            .hero-slide1 {
              background-image: url('https://www.learningcontainer.com/wp-content/uploads/2020/09/Sample-Image-File-for-Testing.png') !important;
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              height: 300px;
              background-position-x: 65%;
            }

            .hero {
              justify-content: center;
              height: 300px;
              padding: 0;
              background-size: cover;
            }
            
            /************** BXSLIDER CSS **************/

Answer 1

I did a workaround where I increased the .bx-viewport height property to show more of the slider content while positioned absolute. (May need to adjust the values as window resizes for smaller screen sizes)

#hero .bx-viewport {height: 390px !important;}
#hero .hero-content {position: absolute; bottom: -80px;}

While I'm still not able to use z-index to overlay the div content, this is just a workaround if someone else finds a better solution to be able to overlay the div content (green background).