CSS로 고정 사이드바 만들기

고정 사이드바는 사용자가 웹페이지를 스크롤할 때 중요한 콘텐츠를 계속 표시할 수 있는 좋은 방법입니다. 이 기사에서는 CSS를 사용하여 고정 사이드바를 만드는 방법을 살펴보고 예상대로 작동하지 않을 수 있는 몇 가지 일반적인 이유에 대해 논의하겠습니다.

당신이 배울 내용

• 고정 사이드바 구현 방법
• 위치를 유발할 수 있는 일반적인 문제: 끈적끈적 실패

1단계: HTML 설정

먼저 사이드바 레이아웃의 기본 구조를 사용하여 index.html 파일을 만듭니다.

<div class="container">
<br>
    <aside class="sidebar"><br>
        <h2 id="Sidebar">Sidebar</h2>
<br>
        <p>This is a sticky sidebar.</p>
<br>
    </aside><br>
    <main class="content"><br>
        <h1 id="Main-Content">Main Content</h1>
<br>
        <p>Lorem ipsum dolor sit amet...</p>
<br>
        <!-- Add more content to enable scrolling --><br>
    </main><br>
</div><br>

2단계: 고정 사이드바에 CSS 추가

다음으로 styles.css 파일을 만들고 다음 스타일을 추가합니다.

몸 {
글꼴 계열: Arial, sans-serif;
여백: 0;
패딩: 0;
}

.컨테이너 {
디스플레이: 플렉스;
}

.사이드바 {
위치: 끈끈함;
상단: 0; /* 사이드바는 상단에 고정됩니다 /
높이: 100vh; / 뷰포트의 전체 높이 */
배경: #f4f4f4;
패딩: 20px;
}

.content {
패딩: 20px;
플렉스: 1; /* 남은 공간을 차지하세요 /
높이: 200vh; / 콘텐츠를 스크롤할 수 있을 만큼 길게 만듭니다 */
}

고정 위젯 샘플 보기

3단계: 고정 사이드바 테스트

웹 브라우저에서 index.html 파일을 열고 아래로 스크롤하세요. 기본 콘텐츠가 스크롤되는 동안 사이드바가 뷰포트 상단에 고정되어 있는 것을 볼 수 있습니다.

---

포지션을 선택하는 일반적인 이유: 고정성이 작동하지 않을 수 있음

고정 사이드바가 예상대로 작동하지 않는 경우 확인해야 할 몇 가지 잠재적인 문제는 다음과 같습니다.

• 상위 오버플로: 고정 요소의 상위 요소에 오버플로: 숨김, 오버플로: 자동 또는 오버플로: 스크롤이 있는 경우 고정 동작이 작동하지 않습니다. 상위 컨테이너가 오버플로를 허용하는지 확인하세요.

• 고정 요소 높이: 고정 요소에는 정의된 높이가 있어야 합니다. 높이가 설정되지 않았거나 뷰포트 높이보다 작을 경우 예상대로 동작하지 않을 수 있습니다.

• 잘못된 위치 지정: 고정 요소에 대해 top 속성을 설정해야 합니다. 그것이 없으면 요소는 어디에 붙어야 할지 알 수 없습니다.

• 디스플레이 속성: 고정 요소가 디스플레이: 없음 또는 디스플레이: 인라인으로 설정되지 않았는지 확인하세요. 이러한 요소는 위치 지정을 방해할 수 있습니다.

• 브라우저 호환성: 대부분의 최신 브라우저는 위치: 고정을 지원하지만 호환되는 브라우저를 사용하고 있는지 확인하고 브라우저 관련 문제가 있는지 확인하세요.

---

결론

CSS를 사용하여 고정 사이드바를 성공적으로 만들었습니다! position:sticky 작동을 방해할 수 있는 일반적인 함정을 이해함으로써 발생하는 모든 문제를 해결할 수 있습니다. 다양한 레이아웃과 스타일을 실험하여 고정적인 위치 지정이 웹 디자인을 어떻게 향상시킬 수 있는지 확인하세요.

위 내용은 CSS로 고정 사이드바 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!