위로 스크롤 버튼을 누르면 페이지 하단에 추가 공백이 생성됩니다.
P粉226642568
P粉226642568 2023-08-13 19:52:48
0
1
534
<p>몇 가지 튜토리얼을 따라 CSS 기반 플로팅 스크롤 상단 버튼을 만들었습니다. 그러나 마지막 HTML 요소(예: 마지막 줄) 아래에 추가 공백이 있는 것을 발견했습니다. 추가 공백의 높이는 내 버튼 높이(50px)와 일치합니다. </p> <p> 또한 arrowUp div 태그를 둘러싸기 위해 별도의 div 태그를 추가해 보았지만 간격은 줄어들었지만 여전히 작지만 눈에 띄는 공백이 있습니다. </p> <p>추가 공백을 피할 수 있는 방법이 있는지 궁금합니다. </p> <pre class="brush:css;toolbar:false;">#arrowUp { 위치: 끈적끈적함; 너비: 50px; 하단: 120px; 배경: #699462; 테두리 반경: 10px; 종횡비: 1; 여백 왼쪽: 자동; 오른쪽 여백: 20px; // 여백-하단: 150px; } #arrowUp a { 콘텐츠: ""; 위치: 절대; 삽입: 25%; 변환: 변환Y(20%) 회전(-45deg); 테두리 상단: 5px 솔리드 #fff; 테두리 오른쪽: 5px 단색 #fff; }</pre> <pre class="brush:html;toolbar:false;"><div> <p> 첫 번째 줄. </p> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <p> 마지막 줄. </p> </div> <div id="arrowUp"> <a href="#"></a> </div></pre> <p><br /></p>
P粉226642568
P粉226642568

모든 응답(1)
P粉376738875

귀하의 경우에는 position: fixed;而不是sticky。请注意,你需要设置right: 0;来将“按钮”定位在屏幕的右边缘。或者,你可以设置right: 20px;을 사용하고 여백 속성을 제거하는 것이 더 낫다고 생각합니다.

빠른 설명

"추가 공백"은 sticky时,元素被定位到文档的正常流程中。这就像使用position: relative;并设置top: -20px一样-元素会向上移动20px,但原始空间被保留,因为它“停留”在文档流中。而使用position: fixed;를 사용하면 문서 흐름에서 해당 요소가 제거되기 때문에 존재합니다.


CSS의 문서 흐름 및 위치 지정에 대해 다음 내용을 읽어 보시기 바랍니다.

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿