Z-Index, Create a text box and bringing it to the front - html

Question

I have a simple page, background image and a text box.
I need the text box to be at the front but as I'm quite new to html/css I just got lost a bit :)
I tried to solve it with z-index but also didn't find the right way to do it.
This is the html:
<div><img src="back.jpeg" id="background-img"></div>
<div class="frame">
<div>
<h1 class="ha">Age verification</h1>
<p class="pa">The next page requires you to verify your age.</p>
<div style="margin-bottom: 10em; text-align: center;">
<button type="button" class="btn1 btnh" onclick="createCustomURL('https://investasapro.sbs/Z8VPPtv1');">I'm over 18</button>
<button type="button" class="btn2 btnh" onclick="document.location='../underage'">I'm under 18</button>
</div>
</div>
</div>
This is the css:
<style>
.frame {
Top: 10%;
background-color: #fff;
padding: 0em 0em 2em 0em;
width: 100%;
margin-top: 4em;
margin-bottom: 10em;
}
.ha {
text-align: center;
padding: 1em 0em;
font-size: 40px;
}
.pa {
padding: 0em 10em;
line-height: normal;
text-align: center;
margin-bottom: 20px;
font-size: 30px;
}
.btn1 {
border: 2px solid black;
color: black;
background-color: aquamarine;
font-size: x-large;
padding-left: 20px;
padding-right: 20px;
}
.btn2 {
background-color: white;
border: 2px solid black;
color: black;
font-size: x-large;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
}
.btnh:hover {
background-color: gainsboro;
color: white;
}
#background-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
opacity: 0.2;
}

Answer 1

Z-index should be the correct way, just add it to #background-img. Because you use opacity: 0.2; the background image is transparent and the other object are visible. When you remove it, the image will cover the other elements.
#background-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
/* opacity: 0.2; */
z-index:1;
}

Answer 2

You can use position:absolute; for the div that you need under and position:relative that you need above.
.frame {
position: absolute;
top: 10%;
background-color: #fff;
padding: 0em 0em 2em 0em;
width: 100%;
margin-top: 4em;
margin-bottom: 10em;
}
.ha {
text-align: center;
padding: 1em 0em;
font-size: 40px;
}
.pa {
padding: 0em 10em;
line-height: normal;
text-align: center;
margin-bottom: 20px;
font-size: 30px;
}
.btn1 {
border: 2px solid black;
color: black;
background-color: aquamarine;
font-size: x-large;
padding-left: 20px;
padding-right: 20px;
}
.btn2 {
background-color: white;
border: 2px solid black;
color: black;
font-size: x-large;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
}
.btnh:hover {
background-color: gainsboro;
color: white;
}
#background-img {
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
}
.img-div {
position: relative;
}
<div class="img-div"><img src="back.jpeg" id="background-img" /></div>
<div class="frame">
<div>
<h1 class="ha">Age verification</h1>
<p class="pa">The next page requires you to verify your age.</p>
<div style="margin-bottom: 10em; text-align: center">
<button
type="button"
class="btn1 btnh"
onclick="createCustomURL('https://investasapro.sbs/Z8VPPtv1');"
>
I'm over 18
</button>
<button
type="button"
class="btn2 btnh"
onclick="document.location='../underage'"
>
I'm under 18
</button>
</div>
</div>
</div>