Блоки с position: absolute вылетают из родителя с position: relative

Question

Хочу сделать такой блок Круг и картинка с автоматом - 2 разных элемента. Я хочу сделать, чтобы при приближении курсора эти элементы слегка двигались. Проблема возникла с размещением этих элементов. Я никак не могу разместить их друг на друге. Если и получается, то у блока .about-us__right пропадает ширина, соответственно текст расширяется до левого края, а картинки уплывают вниз. Как это можно исправить?

.about-us {
  box-sizing: border-box;
  background: white;
  margin-top: 60px;
  width: 86%;
  margin-left: 7%;
  border-radius: 40px;
  display: flex;
  align-items: center;
  padding: 3%;
}

.about-us__right {
  position: relative;
  width: 40%;
  background: red;
}

.about-us__circle {
  position: absolute;
  background: -webkit-linear-gradient(90deg, rgb(24, 182, 106), rgb(87, 255, 0));
  background: -moz-linear-gradient(90deg, rgb(24, 182, 106), rgb(87, 255, 0));
  background: linear-gradient(90deg, rgb(24, 182, 106), rgb(87, 255, 0));
  width: 500px;
  /* ширина круга */
  height: 500px;
  /* высота круга */
  border-radius: 50%;
  /* создание круглой формы */
  z-index: 5;
}

.about-us__right img {
  position: absolute;
  z-index: 10;
}

<div class="about-us">
  <div class="about-us__right">
    <img src="images/avtomat.png" alt="автомат для приема мусора">
    <div class="about-us__circle"></div>
  </div>
  <div class="about-us__text">CleanFuture - инновационная компания, специализирующаяся на производстве специальных автоматов для приема и утилизации различных видов мусора, включая металл, бумагу и пластик. Наша миссия - содействие в очищении окружающей среды путем поощрения и упрощения
    процесса утилизации отходов. Мы стремимся сделать утилизацию мусора удобной и доступной для всех. С нашими инновационными автоматами каждый человек может внести свой вклад в сохранение окружающей среды, получая за это денежное вознаграждение. Присоединяйтесь
    к CleanFuture и вместе мы сделаем мир чище и зеленее!</div>
  <img src="images/leaf.png" alt="листочек" class="about-us__leaf">
</div>

БЛОГ НА HUSL

Блоки с position: absolute вылетают из родителя с position: relative

Ответы (0 шт):