縮小窗口時按鈕重疊

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那樣使父代退出流程position:absolute ，您可以在子代內部移動子代。頂部，右側，左側和底部的容器。

在.btn類上，您需要設置position:relative並為其設置固定的height和width屬性。 您需要固定的高度和寬度，因為絕對定位的元素已從流程中移出，因此它們無助於擴展父容器。 我只是隨機選擇了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的側面相關，而不是與視口相關，因為該position: relative對於按鈕的父級。