html - 我怎么能把新 block 放在另一个 block 之上

Question

我有一个 block 'jumbotron' 它有下一个 css 参数:

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

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

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

}

但如果我尝试更改窗口大小，我的“按钮 block ”就会开始跳舞并阻止设计。我怎样才能将这些按钮粘贴​​到超大屏幕上 什么决定会更常见？

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