我怎么能把新的块放在另一个块的顶部

Question

我有一个块'jumbotron'它有下一个css参数：

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

在窗口中央看起来很漂亮。但现在我想把“容器按钮块”放在上面。使用下一个css参数，它看起来也很棒..

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

}

但如果我试图改变窗户尺寸，我的'按钮块'就会开始跳舞并制动设计。如何将这些按钮粘贴​​到jumbotron块上哪个决定会更常见？

.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

这样的东西？

.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>