Html 缩小窗口时按钮重叠

我在调整浏览器窗口大小时遇到按钮重叠的问题。我看过很多关于这个问题的其他帖子，但提供的解决方案似乎不起作用

我尝试过绝对定位，也尝试过其他一些解决方案，但似乎没有什么真正起作用。一个可能的解决方案是让按钮随窗口调整大小，但我不确定这将如何实现。 这里是一个链接到一个实时版本

---

绝对定位元素相对于其最近的父元素进行定位，该父元素具有非默认的

位置：静态
值的
位置：
规则

处理这种怪癖的一种常见技术是在绝对定位子对象的直接父对象上设置一个
位置：relative
，它不会像float或
位置：absolute
那样将父对象从流中移出，并且您可以在容器内以顶部、右侧、左侧和底部移动子对象

在.btn类上，您需要设置
位置：relative
，并为其提供固定的高度和宽度属性。您需要固定的高度和宽度，因为绝对定位的元素将从流中取出，因此它们的元素不需要展开父容器。我只是随机选择了1000px，它似乎工作得很好

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    height: 1000px;
    width: 1000px;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    position: relative;
    font-size: 1rem;
    /* line-height: 1.5; */
    border-radius: .25rem;
    transition: color .15s 

我记得当我学习定位时，学习绝对定位是一个很大的“啊哈”时刻

请记住，按钮上的顶部、底部、左侧和右侧值将与.btn div的侧面相关，而不是与视口相关，因为按钮父级上的
位置：relative
。
查看“vw”，它表示“等于视口初始包含块宽度的1%”您可以在元素的高度和宽度上使用“视图宽度”，以提供一个随浏览器窗口宽度调整大小的完美正方形。
CSS
#button-1 {
  position: absolute;
  top: 7.5%;
  left: 10%;
  font-family: 'Cinzel', serif;
  z-index: 2;
  background: none;
  color: #ccc;
  width: 110px;
  height: 110px;
  border: 3px solid white;
  font-style: 18px;
  transform: rotate(45deg);
  overflow-x: hidden;
  overflow-y: hidden;
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    height: 1000px;
    width: 1000px;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    position: relative;
    font-size: 1rem;
    /* line-height: 1.5; */
    border-radius: .25rem;
    transition: color .15s