Whenever I adjust the screen size, the text in front of the slider moves. I utilized the grid system in Bootstrap 5.2 to position it. My goal is to keep the text in its original position relative to the carousel when changing the screen size. Here is my code snippet, what adjustments can be made to correct this behavior?
#text-position{
position: absolute;
width: 100%;
color: white;
z-index: 999;
}
.carousel-caption h1{
font-size: 100px;
}
.btn-lg{
width: 200px !important;
position: absolute;
width: 100%;
z-index: 999;
}
.overlay {
color:#fff;
position:absolute;
z-index:12;
top:500px;
left:0;
width:100%;
text-align:center;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5878a8a919691978495a5d0cbd7cbd5c887809184d4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101746f736f716c2324352070">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<main>
<div id="slider" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active">
<img src="images/hero1.png" class="d-block w-100" >
</div>
<div class="carousel-item ">
<img src="images/hero2.jpg" class="d-block w-100" >
</div>
<div class="carousel-item ">
<img src="images/hero3.jpg" class="d-block w-100" >
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#slider" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#slider" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="overlay">
<div class="row">
<div class="col-3 offset-1 "><h5>WE LOVE DESIGN</h5></div>
</div>
<div class="row">
<div class="col-4 offset-1"><h1>CREATIVE MINDES</h1></div>
</div>
<div class="row">
<div class="col-2 offset-1"><button type="button" class="btn btn-outline-light btn-lg " data-mdb-ripple-color="dark">GET IN TOUTCH</button></div>
</div>
</div>
</main>
<script src="js/bootstrap.min.js"></script>