Почему одна кнопка накладывается, а другая нет?

Question

Я создаю карусель, и у меня есть кнопки «Далее» и «Назад», которые должны использоваться пользователем для перебора изображений в указанной карусели. Моя цель состоит в том, чтобы кнопки «Следующая» и «Предыдущая» накладывались поверх изображений, поскольку именно так я указал, что это нужно, единственная проблема по какой-то причине заключается в том, что моя правая кнопка накладывается, а моя левая кнопка - нет. Они оба относятся к одному классу, поэтому я не уверен, почему один накладывается, а другой нет.

Вот мой код

/* CSS  */

.carousel {
  margin-top: 100px;
  width: 98%;
  height: 350px;
  margin-left: 1%;
}

.carouselimages {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Innercontainer {
  background-color: lawngreen;
  height: 100%;
  position: relative;
}

.imageslides {
  position: absolute;
  width: 100%;
  bottom: 0;
  top: 0;
}

.imagecontainers {
  padding: 0;
  margin: 0;
  list-style: none;
}

.carouselbutton {
  position: absolute;
  top: 40%;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.carouselbutton img {
  width: 25px;
}

.carouselbutton--left {
  left: 5px;
}

.carouselbutton--right {
  right: 5px;
}

.carouselnav {
  padding-top: 20px;
}

<div class="carousel">
  <button class="carouselbutton carouselbutton--left">
         <img src="Assets/Carousel - Task 2 Assets/Icons/back.svg" alt="navicons">
       </button>
  <div class="Innercontainer">
    <ul class="imagecontainers">
      <li class="imageslides">
        <img class="carouselimages" src="Assets/Carousel - Task 2 Assets/Images/Banner1.png" alt="Banner1">
      </li>
      <li class="imageslides">
        <img class="carouselimages" src="Assets/Carousel - Task 2 Assets/Images/Banner2.png" alt="Banner2">
      </li>
      <li class="imageslides">
        <img class="carouselimages" src="Assets/Carousel - Task 2 Assets/Images/Banner3.png" alt="Banner3">
      </li>
    </ul>
  </div>
  <button class="carouselbutton carouselbutton--right">
          <img src="Assets/Carousel - Task 2 Assets/Icons/next.svg" alt="navicons">
       </button>
</div>

Вот что я получаю:

Answer 1

Обе ваши кнопки уже позиционированы (абсолютные). Но вам нужно установить глубину элемента, как и при наложении слоев. используйте z-index css.

.carouselbutton{
  position: absolute;
  top: 40%;
  background: transparent;
  border: 0;
  cursor: pointer;

  z-index: 1;
}

Используйте минимально возможное значение для z-index , которое вы можете начать с попытки использовать 1, затем 2, затем 3 и т. д. (последовательно) до тех пор, пока он не уместится на ожидаемом уровне. большое число, например 999, 9999, 10000, 9999999 . что является плохой практикой, особенно если вы пишете библиотеку, предназначенную для использования другими

Answer 2

Добавьте z-index к вашим кнопкам:

.carouselbutton{
      position: absolute;
      top: 40%;
      background: transparent;
      border: 0;
      cursor: pointer;
      z-index: 1;
}

Answer 3

Переместите левую кнопку после carousel, и все заработает.

/* CSS  */

.carousel {
  margin-top: 100px;
  width: 98%;
  height: 350px;
  margin-left: 1%;
}

.carouselimages {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Innercontainer {
  background-color: lawngreen;
  height: 100%;
  position: relative;
}

.imageslides {
  position: absolute;
  width: 100%;
  bottom: 0;
  top: 0;
}

.imagecontainers {
  padding: 0;
  margin: 0;
  list-style: none;
}

.carouselbutton {
  position: absolute;
  top: 40%;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.carouselbutton img {
  width: 25px;
}

.carouselbutton--left {
  left: 5px;
}

.carouselbutton--right {
  right: 5px;
}

.carouselnav {
  padding-top: 20px;
}

<div class="carousel">
  <div class="Innercontainer">
    <ul class="imagecontainers">
      <li class="imageslides">
        <img class="carouselimages" src="Assets/Carousel - Task 2 Assets/Images/Banner1.png" alt="Banner1">
      </li>
      <li class="imageslides">
        <img class="carouselimages" src="Assets/Carousel - Task 2 Assets/Images/Banner2.png" alt="Banner2">
      </li>
      <li class="imageslides">
        <img class="carouselimages" src="Assets/Carousel - Task 2 Assets/Images/Banner3.png" alt="Banner3">
      </li>
    </ul>
  </div>

  <!-- Move the button to HERE -->
  <button class="carouselbutton carouselbutton--left">
    <img src="Assets/Carousel - Task 2 Assets/Icons/back.svg" alt="navicons">
  </button>
  <button class="carouselbutton carouselbutton--right">
    <img src="Assets/Carousel - Task 2 Assets/Icons/next.svg" alt="navicons">
  </button>
</div>