How could I put new block on top of the another block - html

Question

I've had a block 'jumbotron' it has next css parameters:
.jumbotron {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
}
It's looks so good in the centre of window. But now I want put "container button-block"on that. With next css parameters it looks great too..
.button-block {
position: absolute;
top: 5%;
left: 36%;
}
But if I try to change windows size my 'button-block' is starting to dance and brakes design. How can I stick these buttons to jumbotron block What decision will more common?
.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

Something like this?
.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>