Can't position elements on top of each other - CSS Bootstrap ReactJS - html

Question

The text should be in white badge with text center . I use gatsby StaticImages by the way....
Code..
<div class="row mx-4" style={{ position:'relative' }}>
<StaticImage style={{ position:'absolute', filter: 'brightness(100%)' }} src="../images/scrollg.png" alt="tatil" placeholder="tracedSVG" />
<div className="d-flex justify-content-end pt-4 pe-4" >
<StaticImage src="../images/badge.svg" alt="tatil" placeholder="tracedSVG" />
<div style={{ position:'absolute'}}> <p className="text-center">200€’dan başlayan fiyatlarla</p></div>
</div>
<div className="row mx-5 scrollg" style={{ position:'absolute' , height:'400px'}}>
<div className="col-12 my-auto">
<h4 className="fw-bold text-white">Roma’yı Keşfetme Mevsimi</h4><br />
<p className="col-lg-5 col-md-5 col-sm-12 scrollg">Haydi, siz de Tatilbudur’un uygun fiyatlı yurt dışı turlarını incelemeye başlayın, yurt dışında daha fazla yeni yerler keşfetmenin keyfine varın!</p>
<button class=" px-3 py-1 scrollg-button rounded-pill "> Fırsatları Gör</button>
</div>
</div>
</div>

Answer 1

The text here needs to be positioned absolutely and relative to the parent div element within which the text and the image are. So you'll have to add position-relative class to the parent.
To center the text vertically, you can add equal distance on the top and bottom.
To make sure the text is within the white badge, you can add some fixed width to th text div.
<div className="d-flex justify-content-end pt-4 pe-4 position-relative">
<StaticImage src="../images/badge.svg" alt="tatil" placeholder="tracedSVG" />
// I've added 100px width as an example.
<div style={{ position:'absolute', top: '25%', bottom: '25%', width: '100px'}}>
<p className="text-center">200€’dan başlayan fiyatlarla</p>
</div>
</div>