Question

在调整浏览器窗口大小时，按钮重叠存在问题。我看过许多关于同一问题的其他文章，但提供的解决方案似乎不起作用

我尝试了绝对定位，并尝试了其他解决方案，但似乎没有任何实际效果。一种可能的解决方案是使按钮随窗口调整大小，但是我不确定如何实现。这是实时版本https://dragonknightleo.github.io/freelance.github.io/

的链接

HTML
<div class="btn">
        <button id="button-1" type="button"><h5>Andrew Carney</h5></button>
        <a href="portfolio.html"><button id="button-2" type="button"><h5 id="portfolio-home">Portfolio</h5></button></a>
        <a href="about.html"><button id="button-3" type="button"><h5 id="aboutme-home">About Me</h5></button></a>
        <a href="contact.html"><button id="button-4" type="button"><h5 id="contact-home">Contact</h5></button></a>
      </div>

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

Answer 1

绝对定位的元素相对于具有position:规则（不是默认position:static值）的最接近的父元素进行定位。

处理此怪癖的一种常见方法是在绝对定位的子代的直接父级上设置position: relative，不会像浮点数或position:absolute那样使父级退出流程，而您可以使孩子们在容器内上下左右移动。

在.btn类上，您需要设置position:relative并为其设置固定的height和width属性。您需要固定的高度和宽度，因为绝对定位的元素已从流程中移出，因此它们无助于扩展父容器。我只是随机选择了1000像素，效果似乎很好。

.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的侧面相关，而不是与视口相关，因为该视口的父级上的position: relative按钮。

缩小窗口时按钮重叠

1 个答案: