How to put the slider under lightbox?

good day, I'm using the library Nivo-slider.js, but I had a problem, I have a light-box, the problem is that when I activate my light box, the slide is above this, and I do not want do that, some suggestion, how can I make it so that this does not happen:

As you can see the image I have in the light-box is hidden when the slide changes its image, how can I make it so that it does not happen?

The only thing that is handled to make the slider is this:

HTML:

<div class="slider-wrapper theme-default">
    <div class="nivoSlider" id="slider">
        <img src="<?= $refa ?>/img/Catalogo/Running/slide/slide11.jpg" alt="" class="img">
        <img src="<?=$refa ?>/img/Catalogo/Running/slide/slide2.jpg" alt="" class="img">
        <img src="<?=$refa ?>/img/Catalogo/Running/slide/slide3.jpg" alt="" class="img">
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>
</div>

JS:

<script src="<?= $refa ?>/js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).on('load', function() {
    $('#slider').nivoSlider();
 });
</script>

CSS DEL LIGHT-BOX:

.lightbox{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
background: rgba(0, 0, 0, .8);
display: flex;
justify-content: center;
align-items: center;
}

.lightbox img{
  width: 30%;
}

.btn-close{
   width: 50px;
   height: 50px;
   background: #ff0505;
   border: 3px solid #fff;
   border-radius: 100%;
   color: white;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  }