I am facing a challenge in positioning one div above another in Bootstrap. Inside a parent div, I have two child divs - one with an image and the other with text.
Despite trying various methods like adjusting margins using CSS, I cannot seem to get the desired result.
<div id="header" class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-dark">
<div>
<img id="andro" class="img-fluid">
</div>
<div id="mainP" class="bg-dark mx-auto mx-auto center-block">
Text in here
</div>
</div>
#andro{
max-width: 100%;
float: left;
opacity: .5;
margin: 0;
z-index: 5;
}
#mainP{
z-index: 10;
position: absolute;
margin: auto;
margin-right: 50vw;
}
The issue is that I want the "mainP" div to appear on top of the "andro" div, but despite tweaking margins and z-index values via CSS, I still can't achieve the desired stacking order.