스크롤바와 함께 움직이지 않는 CSS div를 구현하는 방법

스크롤 막대와 함께 움직이지 않는 CSS div를 구현하는 방법: 먼저 샘플 파일을 만든 다음 div의 CSS 속성 스타일을 "position:fixed;"로 설정하여 div가 스크롤 막대와 함께 움직이지 않도록 수정합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

권장: "css 비디오 튜토리얼"

css 설정 div가 스크롤 막대와 함께 이동하지 않도록

콘텐츠 일부를 특정 위치에 고정하고 브라우저 창을 기준으로 배치합니다. 여기서는 고정 위치 지정이 사용됩니다.

위치 지정에는 일반적으로 절대 위치 지정과 상대 위치 지정이 포함됩니다. 이는 본문의 블록 요소를 기준으로 하지만 특정 콘텐츠를 특정 위치에 두려면 스크롤 막대가 어디로 움직여도 여전히 브라우저에 있습니다. 창이므로 고정을 사용해야 합니다.

고정 요소 상자는 위치를 절대값으로 설정하는 것처럼 동작하지만 포함 블록은 뷰포트 자체입니다. 왼쪽, 위쪽, 오른쪽, 아래쪽 값을 갖는 데 동의합니다. 사용법은 절대값과 유사합니다.

예:

<div style="width:100px; height:100px; border:1px solid red; position:fixed; left:300px; top:300px;">
    固定的内容
</div>

위의 div는 너비가 100, 높이가 100이고 브라우저 왼쪽 상단에서 300픽셀 떨어져 있습니다. 페이지가 스크롤될 때 스크롤되지 않습니다.

위 내용은 스크롤바와 함께 움직이지 않는 CSS div를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!