Wie kann ich neu setzen Block auf der Oberseite des anderen Blockes

Question

ich einen Block ‚jumbotron‘ es neben CSS Parameter hat gehabt haben:

.jumbotron { 
 
    position: absolute; 
 
    top: 50%; 
 
    left:50%; 
 
    transform: translate(-50%,-50%); 
 
    background: rgba(0, 0, 0, 0.7); 
 
    border-radius: 20px; 
 
}

Es ist sieht so gut aus in der Mitte von Fenster. Aber jetzt möchte ich "container button-block" darauf setzen. Beim nächsten CSS Parameter sieht es zu groß ..

.button-block { 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 36%; 
 

 
}

Aber wenn ich versuche, Windows meine ‚Button-Block‘ Größe zu ändern beginnt und Bremsen Design zu tanzen. Wie kann ich diese Tasten an Jumbotron-Block stecken Welche Entscheidung wird häufiger?

.jumbotron { 
 
    position: absolute; 
 
    top: 50%; 
 
    left:50%; 
 
    transform: translate(-50%,-50%); 
 
    background: rgba(0, 0, 0, 0.7); 
 
    border-radius: 20px; 
 
} 
 

 
.button-block { 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 36%; 
 

 
}

<div class="page-header" style="background-image: url('../assets/img/background_presentation.jpg');"> 
 
    <div class="container button-block"> 
 
     <button type="button" class="btn btn-default btn-circle btn-xl active">1</button> 
 
     <button type="button" class="btn btn-default btn-circle btn-xl">2</button> 
 
     <button type="button" class="btn btn-default btn-circle btn-xl">3</button> 
 
    </div> 
 
    <div class="container"> 
 
     <header class="jumbotron"> 
 

 
      <h2 class="text-center text-white header">What is the property Address</h2> 
 
      <form> 
 
       <div class="form-group"> 
 
        <label for="inputAddress" class="text-white">Address</label> 
 
        <input type="text" class="form-control" id="inputAddress"> 
 
       </div> 
 
       <div class="form-row"> 
 
        <div class="form-group col-md-6"> 
 
         <label for="inputCity" class="text-white">City</label> 
 
         <input type="text" class="form-control" id="inputCity"> 
 
        </div> 
 
        <div class="form-group col-md-6"> 
 
         <label for="inputZip" class="text-white">Zip</label> 
 
         <input type="text" class="form-control" id="inputZip"> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-12 text-center block-buttons"> 
 
       <button type="submit" class="btn btn-neutral btn-lg">Continue</button> 
 
       </div> 
 
      </form> 
 
     </header> 
 
    </div> 
 
</div>

Answer 1

So etwas wie das?

.container{text-align: center;} 
 
.jumbotron { 
 
    position: relative; 
 
    top: 50%; 
 
    display: inline-block; 
 
     margin-top: 25%; 
 
    /*transform: translate(-50%,-50%);*/ 
 
    background: rgba(0, 0, 0, 0.7); 
 
    border-radius: 20px; 
 
} 
 

 
.button-block { 
 
    position: absolute; 
 
    top: -22px; 
 
    left: 36%; 
 

 
}

<div class="page-header" style="background-image: url('../assets/img/background_presentation.jpg');"> 
 

 
    <div class="container"> 
 
     <header class="jumbotron"> 
 
      <div class="container button-block"> 
 
       <button type="button" class="btn btn-default btn-circle btn-xl active">1</button> 
 
       <button type="button" class="btn btn-default btn-circle btn-xl">2</button> 
 
       <button type="button" class="btn btn-default btn-circle btn-xl">3</button> 
 
      </div> 
 
      <h2 class="text-center text-white header">What is the property Address</h2> 
 
      <form> 
 
       <div class="form-group"> 
 
        <label for="inputAddress" class="text-white">Address</label> 
 
        <input type="text" class="form-control" id="inputAddress"> 
 
       </div> 
 
       <div class="form-row"> 
 
        <div class="form-group col-md-6"> 
 
         <label for="inputCity" class="text-white">City</label> 
 
         <input type="text" class="form-control" id="inputCity"> 
 
        </div> 
 
        <div class="form-group col-md-6"> 
 
         <label for="inputZip" class="text-white">Zip</label> 
 
         <input type="text" class="form-control" id="inputZip"> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-12 text-center block-buttons"> 
 
       <button type="submit" class="btn btn-neutral btn-lg">Continue</button> 
 
       </div> 
 
      </form> 
 
     </header> 
 
    </div> 
 
</div>