Кнопка перемещения поверх изображения

Question

У меня есть две кнопки, которые нужно переместить поверх изображения. Одна кнопка должна быть справа от изображения, а другая - слева. Однако на данный момент они приклеиваются к нижнему левому углу изображения, тогда как они должны быть на разных сторонах в середине фотографии. Что я делаю не так?

HTML часть:

CSS часть:

.container carousell-button-right {
    position: relative;
    top: 200%px;
    right: 0%;
}
.container carousell-button-left {
    position: absolute;
    top: 100%;
    left: 0%;
}

Как это выглядит прямо сейчас:

введите описание изображения здесь

Answer 1

1. , поскольку он вам нужен посередине, используйте Relative для родительского элемента и absolute для Right. Это обеспечит его позиционирование абсолютно посередине в зависимости от размера изображения.
2. Вы также должны использовать . для класса carousell.
3. Как упоминалось в комментариях выше 200%px; является недопустимым значением свойства.

body {
  margin: 0;
}

.container {
  position: relative;
}

.container .carousell-button-right {
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 30px;
}

.container .carousell-button-left {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 30px;
}

Answer 2

Посмотрите на приведенный ниже фрагмент и попробуйте использовать flex-box

div {
  width: 200px;
  height: 200px;
  background-color: black;
  
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

button {
  width: 50px;
  height: 20px;
}

<div>
  <button>btn</button>
  <button>btn</button>
</div>