仅用另一个 div 覆盖特定 div [重复]

Question

我试图仅将叠加层放在预览 div 上。 This question 有一个有用的代码，但覆盖覆盖了完整的#step3 div。 我希望它只涵盖#preview 之一。否则底部的按钮将无法点击。显然有很多类似的问题，但这里的问题不是如何制作叠加层，而是如何将叠加层仅放在特定的 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>

Answer 1

你已经很接近了，为了让 position absolute 工作，父母需要 position relative 让它留在里面而不是溢出到页面的其余部分

/*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>

Answer 2

我不确定你想用覆盖实现什么，但老实说，我会使用覆盖 div 的pseudo-element，而不是为其使用专用的 div 元素。只有position: absolute 或position: relative 可以容纳另一个绝对元素。

/*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>