缩小网站时不要让按钮和 div 互相进入

Question

我尝试了很多研究，但找不到任何有用的东西：

我的网站建立在中间有一个方框，下方是一个按钮。我注意到，如果我缩小网站高度，按钮就会位于框下方。我怎样才能让它响应？非常感谢您，如果已经有这样的问题，我们深表歉意。

.bg-text {
  border: 3px inset #f1f1f1;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
  }

.btn {  
  position: absolute;
  top: 70%;
  left: 38%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  cursor: pointer;
}

  <div class="bg-text">

    <h1>h1</h1>
    <p>p</p>

 </div>

 <button type="button" class="btn btn-outline-light">About</button>

Answer 1

我们开始：

.bg-text {
border: 3px inset #f1f1f1;

margin: 20px auto;
z-index: 2;
width: 80%;
padding: 20px;

text-align: center;
}

.btn {  

display: block;

margin: 0 auto;
cursor: pointer;
}

缩小网站时不要让按钮和 div 互相进入

Not letting button and div go into each other when shrinking the website

html

css

responsive