홈>
브라우저의 창 크기를 조정할 때 버튼이 겹치는 문제가 있습니다. 이 동일한 문제에 대한 다른 게시물을 많이 보았지만 제공된 솔루션이 작동하지 않는 것 같습니다.
나는 절대 위치 결정을 시도했지만 다른 솔루션을 시도했지만 실제로 작동하는 것 같지는 않습니다. 가능한 해결책 중 하나는 창에 따라 단추 크기가 조정되지만 이것이 어떻게 수행되는지 잘 모르겠습니다. 라이브 버전 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 : 선택 입력을 클릭할 때 배경 이미지가 확대되는 이유
- html : Mkdocs의 일부 페이지에만 CSS 요소 적용
- javascript : 이 code를 더 잘 작성하고 유사하게 만드는 방법은 무엇입니까? 자바스크립트
- html : 내부 테이블의 내용을 중앙으로 가져오기
- javascript : 이미지 위에 여러 색상이 있는 CSS 오버레이
- javascript : CSS가 추가되면 JS 색상 변경이 작동을 멈춥니다.
- javascript : 동일한 이름을 가진 여러 클래스에 액세스하고 변경하고 반복하여 클릭 시 CSS 변경 사항을 추가하는 방법은 무엇입니까?
- html : cfml 페이지에서 css가 있는 가운데 확인란
- javascript : HTML/CSS 슬라이더가 올바르게 반복되지 않음
- html : 팝업 메뉴가 페이지 여백을 엉망으로 만듭니다.
절대적으로 배치 된 요소는
이 문제를 처리하는 일반적인 기술은position:
가있는 가장 가까운 부모에 대해 배치됩니다. 기본position:static
가 아닌 규칙 값.position: relative
를 설정하는 것입니다. 절대적으로 배치 된 어린이의 직계 부모에서는 플로트 또는position:absolute
처럼 부모를 흐름에서 벗어나지 않습니다. 상단, 오른쪽, 왼쪽 및 아래쪽으로 아이들을 컨테이너 내부로 옮길 수 있습니다..btn 클래스에서
position:relative
를 설정해야합니다. 고정 된 높이 및 너비 속성을 제공합니다. 절대 위치 요소는 흐름에서 빠져 나와 부모 컨테이너를 확장 할 수 없으므로 고정 된 높이와 너비가 필요합니다. 난 그냥 1000px를 무작위로 고르고 잘 작동하는 것 같습니다.포지셔닝을 배웠을 때 절대 포지셔닝으로이 문제를 배우는 것이 큰 '아하'순간임을 기억합니다.
단추의 상하 좌우 값은
position: relative
때문에 뷰포트가 아닌 .btn div의 측면과 관련이 있음을 명심하십시오. 버튼의 부모에.