>

브라우저의 창 크기를 조정할 때 버튼이 겹치는 문제가 있습니다. 이 동일한 문제에 대한 다른 게시물을 많이 보았지만 제공된 솔루션이 작동하지 않는 것 같습니다.

나는 절대 위치 결정을 시도했지만 다른 솔루션을 시도했지만 실제로 작동하는 것 같지는 않습니다. 가능한 해결책 중 하나는 창에 따라 단추 크기가 조정되지만 이것이 어떻게 수행되는지 잘 모르겠습니다. 라이브 버전 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;
}


  • 답변 # 1

    절대적으로 배치 된 요소는 position: 가있는 가장 가까운 부모에 대해 배치됩니다.  기본 position:static 가 아닌 규칙  값.

    이 문제를 처리하는 일반적인 기술은 position: relative 를 설정하는 것입니다.  절대적으로 배치 된 어린이의 직계 부모에서는 플로트 또는 position:absolute 처럼 부모를 흐름에서 벗어나지 않습니다.  상단, 오른쪽, 왼쪽 및 아래쪽으로 아이들을 컨테이너 내부로 옮길 수 있습니다.

    .btn 클래스에서 position: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
    
    

    포지셔닝을 배웠을 때 절대 포지셔닝으로이 문제를 배우는 것이 큰 '아하'순간임을 기억합니다.

    단추의 상하 좌우 값은 position: relative 때문에 뷰포트가 아닌 .btn div의 측면과 관련이 있음을 명심하십시오.  버튼의 부모에.

  • 이전 php - 하나의 열로 하위 배열을 그룹화하고 그룹 내의 다른 열에서 쉼표로 구분 된 값을 만듭니다
  • 다음 파이썬에서 SQLite 테이블/열 이름의 문자열을 어떻게 이스케이프합니까?