Расположите элемент перед другим объектом, используя CSS

Question

Я новичок в CSS, и на этот раз я хочу разместить свой объект перед слайдером, поэтому я читал об этом и знаю, что Slider должен иметь position: relative и другой мой объект с p osition: absolute

Результат желания:

#main-slider {
    width: 100%;
    height: 528px;
    /* border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%; */
    border-bottom-right-radius: 50% 25%;
  border-bottom-left-radius: 50% 25%;
    position: relative;
}

.badge {
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 15px 35px 0 rgba(42,51,83,.12), 0 5px 15px rgba(0,0,0,.06);
    width: 17%;
    position: absolute;
  }
  
  .text {
    padding: 0.5rem 0.25rem 0.5rem 1rem;
  }
  
  .link {
    border-radius: inherit;
   display: inline-block;
   background-color: red;
   padding: 0.5rem 1rem;
    color: #F9F9EC;
    width: 57%;
  }

 <section>
                <div>
                <img id="main-slider"  src="https://via.placeholder.com/1365x528?text=Slider">
                    <div class="badge">
                        <span class="text">Contact us</span>
                        <a class="link">
                          (555) <strong>123 4567</strong>
                        </a>
                </div>
            </div>
            </section>
            
            

С уважением

Answer 1

Вы можете сделать это, добавив к нему класс с именем .wrapper и используя display: flex и justify content center. Также необходим margin top: 0.5em для .badge

Подробнее о flex коробках здесь

Выполните фрагмент ниже.

#main-slider {
  width: 100%;
  height: 528px;
  /* border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%; */
  border-bottom-right-radius: 50% 25%;
  border-bottom-left-radius: 50% 25%;
  position: relative;
}

.badge {
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 15px 35px 0 rgba(42, 51, 83, .12), 0 5px 15px rgba(0, 0, 0, .06);
  position: absolute;
  margin-top: 0.5em;
}

.text {}

.link {
  border-radius: inherit;
  display: inline-block;
  background-color: red;
  padding: 0.5rem 1rem;
  color: #F9F9EC;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

<section>
  <div class="wrapper">
    <img id="main-slider" src="https://via.placeholder.com/1365x528?text=Slider">
    <div class="badge">
      <span class="text">Contact us</span>
      <a class="link">(555) <strong>123 4567</strong></a>
    </div>
  </div>
</section>