时间戳

首页 > 解决方案 > 缩小网站时不让按钮和 div 相互进入

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

问题描述

我试图对其进行大量研究，但找不到任何有用的东西：

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

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

标签： htmlcssresponsive

解决方案

开始了：

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

推荐阅读