cover only a specific div with another div

Question

I am trying to put the overlay only over the preview div. This question had a usefull code I started from but the overlay covers the full #step3 div. I want it to cover only the #preview one. Otherwise the buttons at bottom will not be clickable. Obviously there are plenty of questions similar to this but the issue here is not how to make a overlay, is how to put the overlay only over a specific div.

/*overlay per preview form*/
#preview > .container {
    width: 80% !important;
    margin: 0 auto;
    border: 1px solid #e64646;
    margin-top: 20px;
}
.overlay {
    opacity:0.2;
    filter: alpha(opacity = 0.2);
    position:absolute;
    top:0; bottom:11%; left:0; right:0;
    display:block;
    z-index:2;
    background:#09f;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
    <div class="tab-pane" role="tabpanel" id="step3">
        <h1>Anteprima del tuo form: <small>ecco come lo visualizzeranno gli utenti</small></h1>
        <div id="preview">
            <div class="container">
                <div class="page-header">
                    <h1>Google: <small>Compila un form</small></h1>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <form name="form_3" method="post" class="form-horizontal">
                            <div class="well">Qual � il tuo nome di battesimo?</div>
                            <div class="form-group"><label class="col-md-2" for="nome">nome</label>
                                <div class="col-md-10"><input type="text" class="form-control" name="nome"> </div>
                            </div>
                            <div class="well">Qual � il tuo cognome? Per le donne il cognome da nubile</div>
                            <div class="form-group"><label class="col-md-2" for="cognome">cognome</label>
                                <div class="col-md-10"><input type="text" class="form-control" name="cognome"></div>
                            </div>
                            <div class="well">Sei d'accordo ad essere contattato per ricevere informazioni sui nuovi progetti che partiranno?</div>
                            <div class="form-group">
                                <div class="col-md-10 col-sm-offset-2">
                                    <div class="radio"><label><input type="radio" name="Consenso" value="Si">Si</label></div>
                                    <div class="radio"><label><input type="radio" name="Consenso" value="No">No</label></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-default">Invia</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="overlay"></div>
            </div>
        </div>
        <button type="button" class="btn standard-button" id="submit3">Conferma</button>
        <button type="button" class="btn standard-button" id="back-1">Modifica</button>
        <button type="button" class="btn secondary-button back">Annulla</button>
    </div>
</div>

score 1 · Accepted Answer · answered Jun 18 '20 at 13:24

you were close, for the position absolute to work the parent needs position relative to make it stay inside instead of overflowing into the rest of the page

/*overlay per preview form*/
      #preview > .container {
          width: 80% !important;
          margin: 0 auto;
          border: 1px solid #e64646;
          margin-top: 20px;
      }
    .overlay {
        opacity:0.2;
        filter: alpha(opacity = 0.2);
        position:absolute;
        top:0; bottom:11%; left:0; right:0;
        display:block;
        z-index:2;
        background:#09f;
    }
    #preview{
      position: relative;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="container">
  <div class="tab-pane" role="tabpanel" id="step3">
    <h1>Anteprima del tuo form: <small>ecco come lo visualizzeranno gli utenti</small></h1>
    <div id="preview">
      <div class="container">
              <div class="page-header">
            <h1>Google: <small>Compila un form</small></h1>
        </div>
        <div class="row">
            <div class="col-md-12">
                <form name="form_3" method="post" class="form-horizontal">
                    <div class="well">Qual � il tuo nome di battesimo?</div><div class="form-group"><label class="col-md-2" for="nome">nome</label><div class="col-md-10"><input type="text" class="form-control" name="nome"></div></div><div class="well">Qual � il tuo cognome? Per le donne il cognome da nubile</div><div class="form-group"><label class="col-md-2" for="cognome">cognome</label><div class="col-md-10"><input type="text" class="form-control" name="cognome"></div></div><div class="well">Sei d'accordo ad essere contattato per ricevere informazioni sui nuovi progetti che partiranno?</div><div class="form-group"><div class="col-md-10 col-sm-offset-2"><div class="radio"><label><input type="radio" name="Consenso" value="Si">Si</label></div><div class="radio"><label><input type="radio" name="Consenso" value="No">No</label></div></div></div>                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                              <button type="submit" class="btn btn-default">Invia</button>
                        </div>
                    </div>
                </form>
            </div>        
        </div>
    <div class="overlay"></div>
      </div>
    </div>
    <button type="button" class="btn standard-button" id="submit3">Conferma</button>
    <button type="button" class="btn standard-button" id="back-1">Modifica</button>
    <button type="button" class="btn secondary-button back">Annulla</button>
  </div>
</div>

score 1 · Answer 2 · answered Jun 18 '20 at 13:28

I'm not sure what you want to achieve with the overlay, but I would honestly use a pseudo-element that covers the div instead of having a dedicated div element for it. Only position: absolute or position: relative can hold another absolute element.

/*overlay per preview form*/
      #preview > .container {
          position: relative; /** added **/
          width: 80% !important;
          margin: 0 auto;
          border: 1px solid #e64646;
          margin-top: 20px;
      }
    #preview > .container::before {
        content: ''; /** added **/
        opacity:0.2;
        filter: alpha(opacity = 0.2);
        position:absolute;
        top:0; bottom:11%; left:0; right:0;
        display:block;
        z-index:2;
        background:#09f;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="container">
  <div class="tab-pane" role="tabpanel" id="step3">
    <h1>Anteprima del tuo form: <small>ecco come lo visualizzeranno gli utenti</small></h1>
    <div id="preview">
      <div class="container">
              <div class="page-header">
            <h1>Google: <small>Compila un form</small></h1>
        </div>
        <div class="row">
            <div class="col-md-12">
                <form name="form_3" method="post" class="form-horizontal">
                    <div class="well">Qual � il tuo nome di battesimo?</div>
                    <div class="form-group"><label class="col-md-2" for="nome">nome</label>
                    <div class="col-md-10"><input type="text" class="form-control" name="nome">         </div></div>
                    <div class="well">Qual � il tuo cognome? Per le donne il cognome da nubile</div>
                    <div class="form-group"><label class="col-md-2" for="cognome">cognome</label>
                    <div class="col-md-10"><input type="text" class="form-control" name="cognome"></div></div>
                    <div class="well">Sei d'accordo ad essere contattato per ricevere informazioni sui nuovi progetti che partiranno?</div>
                    <div class="form-group"><div class="col-md-10 col-sm-offset-2">
                    <div class="radio"><label><input type="radio" name="Consenso" value="Si">Si</label></div>
                    <div class="radio"><label><input type="radio" name="Consenso" value="No">No</label></div></div></div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                              <button type="submit" class="btn btn-default">Invia</button>
                        </div>
                    </div>
                </form>
            </div>        
        </div>
    <!-- <div class="overlay"></div> -->
    </div>
    </div>
    <button type="button" class="btn standard-button" id="submit3">Conferma</button>
    <button type="button" class="btn standard-button" id="back-1">Modifica</button>
    <button type="button" class="btn secondary-button back">Annulla</button>
  </div>
</div>

what are the pros of a pseudo element compared to my solution? The goal is to cover the content inside the red border to prevent it to be clicked — Lelio Faieta, Jun 18 '20 at 13:31
Cleaner code. You can later on use javascript to toggle a class on the `.container` element to show or hide the overlay. — Rickard Elimää, Jun 18 '20 at 13:33

cover only a specific div with another div

2 Answers2