홈>
브라우저의 창 크기를 조정할 때 버튼이 겹치는 문제가 있습니다. 이 동일한 문제에 대한 다른 게시물을 많이 보았지만 제공된 솔루션이 작동하지 않는 것 같습니다.
나는 절대 위치 결정을 시도했지만 다른 솔루션을 시도했지만 실제로 작동하는 것 같지는 않습니다. 가능한 해결책 중 하나는 창에 따라 단추 크기가 조정되지만 이것이 어떻게 수행되는지 잘 모르겠습니다. 라이브 버전 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
관련 질문
- html - 부트 스트랩 4에서 반응 형 문제를 해결하는 방법
- html - 벽돌 레이아웃 그림자가 잘립니다
- html - 본문 태그의 배경 이미지가 표시되지 않습니까?
- javascript - 난수로 버튼을 클릭하면 div의 너비를 줄입니다
- html - navbar React에 이미지 로고와 브랜드 이름을 멋지게 배치
- html - 요소가 주변 요소의 위치를 변경하지 못하도록 방지
- html - CSS를 사용하여 카드 크기를 조정하는 방법
- html - 제목 텍스트/본문 텍스트로 div 상자를 만드는 방법
- javascript - 가로 스크롤 가능 컨테이너를 만드는 방법에 여러 행이 포함되어 있습니다
- html - 부트 스트랩 - colapse 아코디언이 작동하지 않음
절대적으로 배치 된 요소는
이 문제를 처리하는 일반적인 기술은position:
가있는 가장 가까운 부모에 대해 배치됩니다. 기본position:static
가 아닌 규칙 값.position: relative
를 설정하는 것입니다. 절대적으로 배치 된 어린이의 직계 부모에서는 플로트 또는position:absolute
처럼 부모를 흐름에서 벗어나지 않습니다. 상단, 오른쪽, 왼쪽 및 아래쪽으로 아이들을 컨테이너 내부로 옮길 수 있습니다..btn 클래스에서
position:relative
를 설정해야합니다. 고정 된 높이 및 너비 속성을 제공합니다. 절대 위치 요소는 흐름에서 빠져 나와 부모 컨테이너를 확장 할 수 없으므로 고정 된 높이와 너비가 필요합니다. 난 그냥 1000px를 무작위로 고르고 잘 작동하는 것 같습니다.포지셔닝을 배웠을 때 절대 포지셔닝으로이 문제를 배우는 것이 큰 '아하'순간임을 기억합니다.
단추의 상하 좌우 값은
position: relative
때문에 뷰포트가 아닌 .btn div의 측면과 관련이 있음을 명심하십시오. 버튼의 부모에.