Position Element in front of another object Using CSS - css

Question

I'm new in CSS and this time I want to position my object in front of slider, So I read about that and I know Slider should have position: relative and my other object with position: absolute
Desire result:
So I do it, but it does not work, also the object is not responsive, how can I fix that? I prepare an example of how it works.
#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>
Regards

Answer 1

You can do this adding a class called .wrapper to this and using display: flex and justify content center. Also need a margin top: 0.5em to your .badge
Read more about flex boxes here
Run snippet below.
#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>