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

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;
    }
htmlcss


Solution 1:[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;
    }

Solution 2:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 HAL
Solution 2 Sumit Sharma

Related Questions