홈>
브라우저의 창 크기를 조정할 때 버튼이 겹치는 문제가 있습니다. 이 동일한 문제에 대한 다른 게시물을 많이 보았지만 제공된 솔루션이 작동하지 않는 것 같습니다.
나는 절대 위치 결정을 시도했지만 다른 솔루션을 시도했지만 실제로 작동하는 것 같지는 않습니다. 가능한 해결책 중 하나는 창에 따라 단추 크기가 조정되지만 이것이 어떻게 수행되는지 잘 모르겠습니다. 라이브 버전 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 : IE11은 CSS 변수를 가져올 때 클래스 선택기를 무시합니다
- html : 헤더 섹션에서 연락처 섹션을 오른쪽으로 이동하려면 어떻게합니까?
- html : 이 총알 포인트의 텍스트가 왜 줄 지어 있지 않은 이유는 무엇입니까?
- javascript : 이미지 클래스에서 작동하지 않지만 제목 클래스 JS에서 code가 작동하지 않습니다.
- javascript : JS 문자열에서 여러 글꼴을 사용하는 방법은 무엇입니까?
- html : 텍스트 추가가 전체 Div를 수백 px로 이동합니까?
- html : 이미지를 적절한 원을 만들 수 있습니까?
- html : Android 기기에 표시되지 않는 이미지
- javascript : 다른 내부 URL jQuery로 리디렉션을 사용하여 인증을 형성합니다
- javascript : 180도 회전 할 때 DIV의 클릭에서 사용자를 비활성화 할 수 있습니까?
절대적으로 배치 된 요소는
이 문제를 처리하는 일반적인 기술은position:
가있는 가장 가까운 부모에 대해 배치됩니다. 기본position:static
가 아닌 규칙 값.position: relative
를 설정하는 것입니다. 절대적으로 배치 된 어린이의 직계 부모에서는 플로트 또는position:absolute
처럼 부모를 흐름에서 벗어나지 않습니다. 상단, 오른쪽, 왼쪽 및 아래쪽으로 아이들을 컨테이너 내부로 옮길 수 있습니다..btn 클래스에서
position:relative
를 설정해야합니다. 고정 된 높이 및 너비 속성을 제공합니다. 절대 위치 요소는 흐름에서 빠져 나와 부모 컨테이너를 확장 할 수 없으므로 고정 된 높이와 너비가 필요합니다. 난 그냥 1000px를 무작위로 고르고 잘 작동하는 것 같습니다.포지셔닝을 배웠을 때 절대 포지셔닝으로이 문제를 배우는 것이 큰 '아하'순간임을 기억합니다.
단추의 상하 좌우 값은
position: relative
때문에 뷰포트가 아닌 .btn div의 측면과 관련이 있음을 명심하십시오. 버튼의 부모에.