У меня есть два перекрывающихся div

Question

У меня на сайте два перекрывающихся элемента, я не могу найти решение.Я не знаю, о позициях или нет?

#slides {
  position: relative;
  height: 600px;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.slide {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

.img_slider {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px groove;
}

.showing {
  opacity: 1;
  z-index: 2;
}

<div id="sliderBox" class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <ul id="slides">

        <li class="slide showing"><img class="img_slider" src="./images/bg2.png" />
          <p class="textSlider">Cliquez sur la station de votre choix<br />Si un vélo est disponible le bouton "Effectuer une reservation" s'activera</p>
        </li>
        <li class="slide"><img class="img_slider" src="./images/bg3.png" />
          <p class="textSlider">Pour valider votre réservation, merci de remplir les champs nom et prénom, et effectuer une signature</p>
        </li>
      </ul>

    </div>
  </div>
</div>

Я пытался изменить позицию, но ничего не сделал, я искал ответы, но ни один не соответствует